Initial ecommerce standalone package
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MessageOutlined,
|
||||
PlusOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useCallback, useState } from "react";
|
||||
import type { ConversationSummary } from "../../api/conversationClient";
|
||||
|
||||
interface ConversationSidebarProps {
|
||||
conversations: ConversationSummary[];
|
||||
activeId: number | null;
|
||||
collapsed: boolean;
|
||||
onToggle: () => void;
|
||||
onSelect: (id: number) => void;
|
||||
onNew: () => void;
|
||||
onDelete: (id: number) => void;
|
||||
onRename: (id: number, title: string) => void;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const now = Date.now();
|
||||
const then = new Date(dateStr).getTime();
|
||||
const diff = now - then;
|
||||
if (diff < 60_000) return "刚刚";
|
||||
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
|
||||
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
|
||||
if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`;
|
||||
return new Date(dateStr).toLocaleDateString("zh-CN");
|
||||
}
|
||||
|
||||
export default function ConversationSidebar({
|
||||
conversations,
|
||||
activeId,
|
||||
collapsed,
|
||||
onToggle,
|
||||
onSelect,
|
||||
onNew,
|
||||
onDelete,
|
||||
onRename,
|
||||
}: ConversationSidebarProps) {
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
||||
const startRename = useCallback((id: number, currentTitle: string) => {
|
||||
setEditingId(id);
|
||||
setEditValue(currentTitle);
|
||||
}, []);
|
||||
|
||||
const commitRename = useCallback(() => {
|
||||
if (editingId !== null && editValue.trim()) {
|
||||
onRename(editingId, editValue.trim());
|
||||
}
|
||||
setEditingId(null);
|
||||
}, [editingId, editValue, onRename]);
|
||||
|
||||
return (
|
||||
<aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
|
||||
<div className="conversation-sidebar__header">
|
||||
<button
|
||||
type="button"
|
||||
className="conversation-sidebar__toggle"
|
||||
onClick={onToggle}
|
||||
aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
|
||||
>
|
||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</button>
|
||||
{!collapsed && (
|
||||
<button type="button" className="conversation-sidebar__new" onClick={onNew}>
|
||||
<PlusOutlined /> 新对话
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
<div className="conversation-sidebar__list">
|
||||
{conversations.length === 0 ? (
|
||||
<div className="conversation-sidebar__empty">
|
||||
<MessageOutlined />
|
||||
<span>暂无对话记录</span>
|
||||
</div>
|
||||
) : (
|
||||
conversations.map((conv) => (
|
||||
<div
|
||||
key={conv.id}
|
||||
className={`conversation-sidebar__item${conv.id === activeId ? " is-active" : ""}`}
|
||||
>
|
||||
{editingId === conv.id ? (
|
||||
<input
|
||||
className="conversation-sidebar__rename-input"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onBlur={commitRename}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commitRename();
|
||||
if (e.key === "Escape") setEditingId(null);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="conversation-sidebar__item-main"
|
||||
onClick={() => onSelect(conv.id)}
|
||||
>
|
||||
<span className="conversation-sidebar__item-title">{conv.title}</span>
|
||||
<span className="conversation-sidebar__item-time">
|
||||
{formatRelativeTime(conv.updatedAt)}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
<div className="conversation-sidebar__item-actions">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="重命名"
|
||||
onClick={() => startRename(conv.id, conv.title)}
|
||||
>
|
||||
<EditOutlined />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="删除"
|
||||
onClick={() => onDelete(conv.id)}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import {
|
||||
CloudSyncOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
FolderOpenOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ReloadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import type { WebProjectSummary } from "../../types";
|
||||
|
||||
interface ProjectSidebarProps {
|
||||
projects: WebProjectSummary[];
|
||||
activeId: string | null;
|
||||
collapsed: boolean;
|
||||
filterMode?: "chat" | "image" | "video";
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
onToggle: () => void;
|
||||
onSelect: (id: string) => void;
|
||||
onRefresh: () => void;
|
||||
onRename: (id: string, title: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const then = new Date(dateStr).getTime();
|
||||
if (!Number.isFinite(then)) return "";
|
||||
const diff = Date.now() - then;
|
||||
if (diff < 60_000) return "just now";
|
||||
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} min ago`;
|
||||
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} h ago`;
|
||||
if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} d ago`;
|
||||
return new Date(dateStr).toLocaleDateString("zh-CN");
|
||||
}
|
||||
|
||||
export default function ProjectSidebar({
|
||||
projects,
|
||||
activeId,
|
||||
collapsed,
|
||||
filterMode,
|
||||
loading,
|
||||
error,
|
||||
onToggle,
|
||||
onSelect,
|
||||
onRefresh,
|
||||
onRename,
|
||||
onDelete,
|
||||
}: ProjectSidebarProps) {
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
||||
const filteredProjects = useMemo(
|
||||
() => filterMode ? projects.filter((p) => p.mode === filterMode) : projects,
|
||||
[projects, filterMode],
|
||||
);
|
||||
|
||||
const startRename = useCallback((project: WebProjectSummary) => {
|
||||
setEditingId(project.id);
|
||||
setEditValue(project.name);
|
||||
}, []);
|
||||
|
||||
const commitRename = useCallback(() => {
|
||||
if (editingId && editValue.trim()) {
|
||||
onRename(editingId, editValue.trim());
|
||||
}
|
||||
setEditingId(null);
|
||||
}, [editValue, editingId, onRename]);
|
||||
|
||||
return (
|
||||
<aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
|
||||
<div className="conversation-sidebar__header">
|
||||
<button
|
||||
type="button"
|
||||
className="conversation-sidebar__toggle"
|
||||
onClick={onToggle}
|
||||
aria-label={collapsed ? "Expand project sidebar" : "Collapse project sidebar"}
|
||||
>
|
||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</button>
|
||||
{!collapsed && (
|
||||
<div className="conversation-sidebar__header-actions">
|
||||
<button type="button" className="conversation-sidebar__new" onClick={() => onSelect("")}>
|
||||
<FolderOpenOutlined /> 新对话
|
||||
</button>
|
||||
<button type="button" className="conversation-sidebar__icon-button" onClick={onRefresh} aria-label="刷新记录">
|
||||
<ReloadOutlined />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
<div className="conversation-sidebar__list">
|
||||
{error ? (
|
||||
<div className="conversation-sidebar__empty">
|
||||
<CloudSyncOutlined />
|
||||
<span>Server data failed to load</span>
|
||||
</div>
|
||||
) : filteredProjects.length === 0 ? (
|
||||
<div className="conversation-sidebar__empty">
|
||||
<FolderOpenOutlined />
|
||||
<span>{loading ? "正在加载记录..." : "暂无该类型记录"}</span>
|
||||
</div>
|
||||
) : (
|
||||
filteredProjects.map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className={`conversation-sidebar__item${project.id === activeId ? " is-active" : ""}`}
|
||||
>
|
||||
{editingId === project.id ? (
|
||||
<input
|
||||
className="conversation-sidebar__rename-input"
|
||||
value={editValue}
|
||||
onChange={(event) => setEditValue(event.target.value)}
|
||||
onBlur={commitRename}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") commitRename();
|
||||
if (event.key === "Escape") setEditingId(null);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="conversation-sidebar__item-main"
|
||||
onClick={() => onSelect(project.id)}
|
||||
>
|
||||
<span className="conversation-sidebar__item-title">{project.name}</span>
|
||||
<span className="conversation-sidebar__item-time">
|
||||
{project.source === "server" ? formatRelativeTime(project.updatedAt) : "preview"}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
<div className="conversation-sidebar__item-actions">
|
||||
<button type="button" aria-label="Rename project" onClick={() => startRename(project)}>
|
||||
<EditOutlined />
|
||||
</button>
|
||||
<button type="button" aria-label="Delete project" onClick={() => onDelete(project.id)}>
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
|
||||
|
||||
type MessageStatus = "thinking" | "completed" | "failed" | string;
|
||||
|
||||
interface SmoothedProgressBarProps {
|
||||
progress: number;
|
||||
status: MessageStatus;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
function mapMessageStatus(status: MessageStatus) {
|
||||
if (status === "thinking") return "running" as const;
|
||||
if (status === "completed") return "completed" as const;
|
||||
if (status === "failed") return "failed" as const;
|
||||
return "running" as const;
|
||||
}
|
||||
|
||||
export function SmoothedProgressBar({ progress, status, label }: SmoothedProgressBarProps) {
|
||||
const smoothed = useSmoothedProgress(progress, mapMessageStatus(status));
|
||||
return (
|
||||
<>
|
||||
<span>{label || "超分处理中..."}</span>
|
||||
<strong>{smoothed}%</strong>
|
||||
<i style={{ width: `${smoothed}%` }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,88 @@
|
||||
import { FileTextOutlined, SoundOutlined } from "@ant-design/icons";
|
||||
import type { PromptMentionItem, PromptMentionTokenRange, ReferenceItem } from "./workbenchConstants";
|
||||
import { renderPromptPreviewNodes, getPromptMentionTokenRanges } from "./workbenchMentionUtils";
|
||||
|
||||
export { getPromptMentionTokenRanges };
|
||||
|
||||
export function findPromptMentionRangeInside(index: number, ranges: PromptMentionTokenRange[]) {
|
||||
return ranges.find((range) => index > range.start && index < range.end);
|
||||
}
|
||||
|
||||
export function findPromptMentionRangeOverlap(start: number, end: number, ranges: PromptMentionTokenRange[]) {
|
||||
return ranges.find((range) => start < range.end && end > range.start);
|
||||
}
|
||||
|
||||
export function ReferenceInlinePreview({
|
||||
item,
|
||||
}: {
|
||||
item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
|
||||
}) {
|
||||
if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
|
||||
return item.kind === "video" ? (
|
||||
<video src={item.previewUrl} muted playsInline />
|
||||
) : (
|
||||
<img src={item.previewUrl} alt={item.name} loading="lazy" />
|
||||
);
|
||||
}
|
||||
|
||||
return item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />;
|
||||
}
|
||||
|
||||
export function ReferencePreview({
|
||||
item,
|
||||
label,
|
||||
}: {
|
||||
item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
|
||||
label?: string;
|
||||
}) {
|
||||
if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
|
||||
return item.kind === "video" ? (
|
||||
<video src={item.previewUrl} muted playsInline />
|
||||
) : (
|
||||
<img src={item.previewUrl} alt={item.name} loading="lazy" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="wb-composer__ref-icon">
|
||||
{item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
|
||||
{label ? <span>{label}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function PromptPreviewLayer({
|
||||
text,
|
||||
items,
|
||||
onTokenPointerDown,
|
||||
}: {
|
||||
text: string;
|
||||
items: PromptMentionItem[];
|
||||
onTokenPointerDown?: (index: number) => void;
|
||||
}) {
|
||||
const nodes = renderPromptPreviewNodes(text, items);
|
||||
if (nodes.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="wb-composer__highlight"
|
||||
aria-hidden="true"
|
||||
onPointerDown={(event) => {
|
||||
const target =
|
||||
event.target instanceof Element
|
||||
? event.target.closest<HTMLElement>(".wb-composer__mention-inline-chip")
|
||||
: null;
|
||||
if (!target) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const tokenEnd = Number(target.dataset.tokenEnd);
|
||||
if (Number.isFinite(tokenEnd)) {
|
||||
onTokenPointerDown?.(tokenEnd);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{nodes}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import type { ReactNode } from "react";
|
||||
import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
|
||||
import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
|
||||
|
||||
export function SelectChip({
|
||||
chipId,
|
||||
value,
|
||||
options,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
onClose,
|
||||
onChange,
|
||||
ariaLabel,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
ariaLabel?: string;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
const activeOption = options.find((option) => option.value === value);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`ai-workbench-select-chip${chipId.endsWith("-model") ? " ai-workbench-select-chip--model" : ""}${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="ai-workbench-select-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-listbox`}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__copy">
|
||||
<span className="ai-workbench-select-chip__value">{activeOption?.label || value}</span>
|
||||
</span>
|
||||
<DownOutlined className="ai-workbench-select-chip__arrow" />
|
||||
</button>
|
||||
|
||||
{isOpen ? (
|
||||
<div
|
||||
id={`${chipId}-listbox`}
|
||||
className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--${direction} is-open`}
|
||||
role="listbox"
|
||||
>
|
||||
{options.map((option, index) => {
|
||||
const active = option.value === value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={`ai-workbench-select-chip__option${active ? " is-active" : ""}`}
|
||||
style={{ transitionDelay: `${index * 18}ms` }}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__option-label">
|
||||
<span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
|
||||
<span className="ai-workbench-select-chip__option-copy">
|
||||
<span className="ai-workbench-select-chip__option-title">
|
||||
<span>{option.label}</span>
|
||||
{option.badge ? (
|
||||
<span className="ai-workbench-select-chip__option-badge">{option.badge}</span>
|
||||
) : null}
|
||||
</span>
|
||||
{option.description ? (
|
||||
<span className="ai-workbench-select-chip__option-desc">{option.description}</span>
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompoundSelectChip({
|
||||
chipId,
|
||||
summary,
|
||||
groups,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
summary: string;
|
||||
groups: WorkbenchFieldGroup[];
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`ai-workbench-select-chip ai-workbench-select-chip--compound${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="ai-workbench-select-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-panel`}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__copy">
|
||||
<span className="ai-workbench-select-chip__value">{summary}</span>
|
||||
</span>
|
||||
<DownOutlined className="ai-workbench-select-chip__arrow" />
|
||||
</button>
|
||||
|
||||
{isOpen ? (
|
||||
<div
|
||||
id={`${chipId}-panel`}
|
||||
className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--compound ai-workbench-select-chip__dropdown--${direction} is-open`}
|
||||
role="dialog"
|
||||
>
|
||||
<div className="ai-workbench-settings-panel">
|
||||
{groups.map((group) => {
|
||||
const currentLabel =
|
||||
group.options.find((option) => option.value === group.value)?.label || group.value;
|
||||
const fieldKey = `${group.kind || "pill"}-${group.label}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={fieldKey}
|
||||
className={`ai-workbench-settings-panel__field ai-workbench-settings-panel__field--${group.kind || "pill"}`}
|
||||
>
|
||||
<div className="ai-workbench-settings-panel__head">
|
||||
<div className="ai-workbench-settings-panel__title-wrap">
|
||||
{group.icon ? (
|
||||
<span className="ai-workbench-settings-panel__title-icon">{group.icon}</span>
|
||||
) : null}
|
||||
<div className="ai-workbench-settings-panel__title-copy">
|
||||
<div className="ai-workbench-settings-panel__title">{group.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="ai-workbench-settings-panel__current">{currentLabel}</span>
|
||||
</div>
|
||||
|
||||
<fieldset
|
||||
className={`ai-workbench-settings-panel__grid ai-workbench-settings-panel__grid--${group.kind || "pill"} ${getSettingsGridColumnsClassName(group.columns || 3)}`}
|
||||
>
|
||||
<legend className="ai-workbench-visually-hidden">{group.label}</legend>
|
||||
{group.options.map((option) => {
|
||||
const active = option.value === group.value;
|
||||
return (
|
||||
<button
|
||||
key={`${fieldKey}-${option.value}`}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
className={`ai-workbench-settings-panel__option ai-workbench-settings-panel__option--${group.kind || "pill"}${active ? " is-active" : ""}`}
|
||||
onClick={() => group.onChange(option.value)}
|
||||
>
|
||||
{group.kind === "ratio" ? (
|
||||
<span className="ai-workbench-ratio-option">
|
||||
<span
|
||||
className={`ai-workbench-ratio-option__preview ${getRatioOptionClassName(option.value)}`}
|
||||
>
|
||||
<span className="ai-workbench-ratio-option__frame" />
|
||||
</span>
|
||||
<span className="ai-workbench-ratio-option__label">{option.label}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span>{option.label}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InlineOptionChip({
|
||||
chipId,
|
||||
value,
|
||||
options,
|
||||
icon,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
onClose,
|
||||
onChange,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
icon?: ReactNode;
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
const activeOption = options.find((option) => option.value === value);
|
||||
|
||||
return (
|
||||
<div className={`wb-inline-chip${isOpen ? " is-open" : ""}${disabled ? " is-disabled" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-inline-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-listbox`}
|
||||
>
|
||||
{icon ? <span className="wb-inline-chip__icon">{icon}</span> : null}
|
||||
<span>{activeOption?.label || value}</span>
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<div id={`${chipId}-listbox`} className={`wb-inline-chip__menu wb-inline-chip__menu--${direction}`} role="listbox">
|
||||
{options.map((option) => {
|
||||
const active = option.value === value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={`wb-inline-chip__option${active ? " is-active" : ""}`}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{active ? <span className="wb-inline-chip__check">✓</span> : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,611 @@
|
||||
import { memo, useCallback, useEffect, useRef, useState, type CSSProperties, type ChangeEvent } from "react";
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
CaretRightOutlined,
|
||||
ClockCircleOutlined,
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
FileTextOutlined,
|
||||
FullscreenOutlined,
|
||||
MutedOutlined,
|
||||
PauseOutlined,
|
||||
PictureOutlined,
|
||||
ReloadOutlined,
|
||||
SoundOutlined,
|
||||
StopOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { assetClient } from "../../../api/assetClient";
|
||||
import { communityClient } from "../../../api/communityClient";
|
||||
import { saveAssetToLocalLibrary } from "../../assets/localAssetStore";
|
||||
import { SmoothedProgressBar } from "../SmoothedProgressBar";
|
||||
import { useSmoothedProgress } from "../../../hooks/useSmoothedProgress";
|
||||
import { renderMarkdownBlocks } from "../markdownRenderer";
|
||||
import { downloadResultAsset } from "../workbenchDownload";
|
||||
import type { WorkbenchChatAttachment, WorkbenchChatMessage, WorkbenchResultActionPayload } from "../workbenchChatTypes";
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function cleanModelDisplayLabel(label: string) {
|
||||
const channelName = "百炼";
|
||||
return label.replace(new RegExp(`\\s*[（(]\\s*${channelName}\\s*[）)]`, "g"), "").trim();
|
||||
}
|
||||
|
||||
function formatMediaTime(value: number) {
|
||||
if (!Number.isFinite(value) || value <= 0) return "0:00";
|
||||
const minutes = Math.floor(value / 60);
|
||||
const seconds = Math.floor(value % 60);
|
||||
return `${minutes}:${String(seconds).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
// ─── MarkdownMessage ──────────────────────────────────────────────────────────
|
||||
|
||||
export const MarkdownMessage = memo(function MarkdownMessage({ text }: { text: string }) {
|
||||
const normalized = text.trim();
|
||||
if (!normalized) return null;
|
||||
return <div className="ai-chat-markdown">{renderMarkdownBlocks(normalized)}</div>;
|
||||
});
|
||||
|
||||
// ─── ImmersiveVideoPlayer ─────────────────────────────────────────────────────
|
||||
|
||||
export const ImmersiveVideoPlayer = memo(function ImmersiveVideoPlayer({
|
||||
src,
|
||||
title,
|
||||
}: {
|
||||
src: string;
|
||||
title: string;
|
||||
}) {
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
const frameRef = useRef<HTMLDivElement | null>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [volume, setVolume] = useState(1);
|
||||
|
||||
const syncVideoState = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
setIsPlaying(!video.paused && !video.ended);
|
||||
setIsMuted(video.muted);
|
||||
setVolume(video.volume);
|
||||
setCurrentTime(video.currentTime || 0);
|
||||
setDuration(Number.isFinite(video.duration) ? video.duration : 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return undefined;
|
||||
|
||||
video.volume = volume;
|
||||
syncVideoState();
|
||||
|
||||
const events: Array<keyof HTMLMediaElementEventMap> = [
|
||||
"loadedmetadata",
|
||||
"durationchange",
|
||||
"timeupdate",
|
||||
"play",
|
||||
"pause",
|
||||
"ended",
|
||||
"volumechange",
|
||||
];
|
||||
events.forEach((eventName) => video.addEventListener(eventName, syncVideoState));
|
||||
return () => events.forEach((eventName) => video.removeEventListener(eventName, syncVideoState));
|
||||
}, [src, syncVideoState, volume]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleFullscreenChange = () => {
|
||||
setIsFullscreen(document.fullscreenElement === frameRef.current);
|
||||
};
|
||||
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
}, []);
|
||||
|
||||
const togglePlayback = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
if (video.paused || video.ended) {
|
||||
void video.play().catch(() => {});
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSeek = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const video = videoRef.current;
|
||||
const nextTime = Number(event.currentTarget.value);
|
||||
if (!video || !Number.isFinite(nextTime)) return;
|
||||
video.currentTime = nextTime;
|
||||
setCurrentTime(nextTime);
|
||||
};
|
||||
|
||||
const handleVolumeChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const video = videoRef.current;
|
||||
const nextVolume = Number(event.currentTarget.value);
|
||||
if (!video || !Number.isFinite(nextVolume)) return;
|
||||
video.volume = nextVolume;
|
||||
video.muted = nextVolume === 0;
|
||||
setVolume(nextVolume);
|
||||
setIsMuted(video.muted);
|
||||
};
|
||||
|
||||
const toggleMute = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.muted = !video.muted;
|
||||
setIsMuted(video.muted);
|
||||
}, []);
|
||||
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
const frame = frameRef.current;
|
||||
if (!frame) return;
|
||||
if (document.fullscreenElement === frame) {
|
||||
void document.exitFullscreen?.();
|
||||
} else {
|
||||
void frame.requestFullscreen?.();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const progress = duration > 0 ? Math.min(100, Math.max(0, (currentTime / duration) * 100)) : 0;
|
||||
const volumeProgress = Math.min(100, Math.max(0, volume * 100));
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={frameRef}
|
||||
className={`ai-chat-media-player${isPlaying ? " is-playing" : ""}${isFullscreen ? " is-fullscreen" : ""}`}
|
||||
>
|
||||
<div className="ai-chat-media-player__stage" onClick={togglePlayback}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
key={src}
|
||||
src={src}
|
||||
playsInline
|
||||
preload="metadata"
|
||||
aria-label={title}
|
||||
/>
|
||||
<span className="ai-chat-media-player__vignette" />
|
||||
<button
|
||||
type="button"
|
||||
className="ai-chat-media-player__center-play"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
togglePlayback();
|
||||
}}
|
||||
aria-label={isPlaying ? "Pause video" : "Play video"}
|
||||
>
|
||||
{isPlaying ? <PauseOutlined /> : <CaretRightOutlined />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="ai-chat-media-player__controls" onClick={(event) => event.stopPropagation()}>
|
||||
<input
|
||||
className="ai-chat-media-player__seek"
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
step="0.01"
|
||||
value={Math.min(currentTime, duration || currentTime)}
|
||||
onChange={handleSeek}
|
||||
disabled={duration <= 0}
|
||||
aria-label="Video progress"
|
||||
style={{ "--progress": `${progress}%` } as CSSProperties}
|
||||
/>
|
||||
<div className="ai-chat-media-player__bar">
|
||||
<button type="button" onClick={togglePlayback} aria-label={isPlaying ? "Pause video" : "Play video"}>
|
||||
{isPlaying ? <PauseOutlined /> : <CaretRightOutlined />}
|
||||
</button>
|
||||
<span className="ai-chat-media-player__time">
|
||||
{formatMediaTime(currentTime)} / {formatMediaTime(duration)}
|
||||
</span>
|
||||
<span className="ai-chat-media-player__spacer" />
|
||||
<button type="button" onClick={toggleMute} aria-label={isMuted ? "Unmute video" : "Mute video"}>
|
||||
{isMuted || volume === 0 ? <MutedOutlined /> : <SoundOutlined />}
|
||||
</button>
|
||||
<input
|
||||
className="ai-chat-media-player__volume"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
aria-label="Video volume"
|
||||
style={{ "--progress": `${isMuted ? 0 : volumeProgress}%` } as CSSProperties}
|
||||
/>
|
||||
<button type="button" onClick={toggleFullscreen} aria-label="Fullscreen video">
|
||||
<FullscreenOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// ─── ResultCard ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const ResultCard = memo(function ResultCard({
|
||||
message,
|
||||
onRegenerate,
|
||||
onOpenMedia,
|
||||
onSuperResolveVideo,
|
||||
onSuperResolveImage,
|
||||
onOpenResultInCanvas,
|
||||
downloadFilenameBase,
|
||||
}: {
|
||||
message: WorkbenchChatMessage;
|
||||
onRegenerate: (message: WorkbenchChatMessage) => void;
|
||||
onOpenMedia: (item: WorkbenchChatAttachment) => void;
|
||||
onSuperResolveVideo: (message: WorkbenchChatMessage) => void;
|
||||
onSuperResolveImage: (message: WorkbenchChatMessage) => void;
|
||||
onOpenResultInCanvas?: (payload: WorkbenchResultActionPayload) => void;
|
||||
downloadFilenameBase?: string;
|
||||
}) {
|
||||
const [mediaRatio, setMediaRatio] = useState<string | null>(null);
|
||||
const [actionNotice, setActionNotice] = useState<string | null>(null);
|
||||
const [isPublishing, setIsPublishing] = useState(false);
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
const [mediaExpired, setMediaExpired] = useState(false);
|
||||
const isVideo = message.resultType === "video";
|
||||
const hasMedia = !!message.resultUrl;
|
||||
const isSuperResolving =
|
||||
hasMedia &&
|
||||
message.status === "thinking" &&
|
||||
message.taskStatusLabel?.includes("超分");
|
||||
const promptText = message.prompt || (message.resultUrl ? "" : message.body);
|
||||
|
||||
const handleCopyPrompt = () => {
|
||||
if (promptText) {
|
||||
navigator.clipboard.writeText(promptText);
|
||||
}
|
||||
};
|
||||
|
||||
const specs = message.result?.specs || [];
|
||||
const modelTag = cleanModelDisplayLabel(specs[0] || "");
|
||||
const modeTag = specs.length > 1 ? specs[1] : "";
|
||||
const mediaStyle = mediaRatio ? ({ "--media-ratio": mediaRatio } as CSSProperties) : undefined;
|
||||
const durationTag = specs.find((spec) => /\b\d+s\b|秒/.test(spec)) || "5s";
|
||||
const openGeneratedMedia = () => {
|
||||
if (!message.resultUrl) return;
|
||||
onOpenMedia({
|
||||
kind: isVideo ? "video" : "image",
|
||||
name: message.result?.title || (isVideo ? "生成视频" : "生成图片"),
|
||||
token: message.taskId ? `#${message.taskId}` : "@结果",
|
||||
previewUrl: message.resultUrl,
|
||||
remoteUrl: message.resultUrl,
|
||||
});
|
||||
};
|
||||
const resultTitle = message.result?.title || (isVideo ? "生成视频" : "生成图片");
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!message.resultUrl || isDownloading) return;
|
||||
setIsDownloading(true);
|
||||
setActionNotice("正在准备下载...");
|
||||
try {
|
||||
const filenameBase = downloadFilenameBase || resultTitle;
|
||||
const status = await downloadResultAsset(message.resultUrl, filenameBase, isVideo, message.resultOssKey ? undefined : message.taskId);
|
||||
setActionNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
setActionNotice("已取消保存");
|
||||
} else {
|
||||
setActionNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
|
||||
}
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buildResultPayload = (): WorkbenchResultActionPayload | null => {
|
||||
if (!message.resultUrl || !message.resultType) return null;
|
||||
return {
|
||||
title: resultTitle,
|
||||
prompt: promptText,
|
||||
resultUrl: message.resultUrl,
|
||||
resultType: message.resultType,
|
||||
taskId: message.taskId,
|
||||
resultOriginalUrl: message.resultOriginalUrl,
|
||||
resultOssKey: message.resultOssKey,
|
||||
resultMimeType: message.resultMimeType,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSaveAsset = async () => {
|
||||
const payload = buildResultPayload();
|
||||
if (!payload) return;
|
||||
saveAssetToLocalLibrary({
|
||||
type: payload.resultType === "video" ? "video" : "scene",
|
||||
name: payload.title,
|
||||
description: payload.prompt || "从生成结果保存的素材。",
|
||||
imageUrl: payload.resultUrl,
|
||||
tags: [payload.resultType === "video" ? "生成视频" : "生成图片", "工作台"],
|
||||
});
|
||||
try {
|
||||
await assetClient.create({
|
||||
type: payload.resultType === "video" ? "video" : "image",
|
||||
name: payload.title,
|
||||
description: payload.prompt || "从生成结果保存的素材。",
|
||||
url: payload.resultUrl,
|
||||
ossKey: payload.resultOssKey,
|
||||
tags: [payload.resultType === "video" ? "生成视频" : "生成图片", "工作台"],
|
||||
sourceTaskId: payload.taskId,
|
||||
metadata: {
|
||||
source: "workbench-result",
|
||||
prompt: payload.prompt,
|
||||
resultType: payload.resultType,
|
||||
originalUrl: payload.resultOriginalUrl || null,
|
||||
mimeType: payload.resultMimeType || null,
|
||||
},
|
||||
});
|
||||
setActionNotice("已保存到服务器资产库");
|
||||
} catch {
|
||||
setActionNotice("已保存到本地资产库，登录后可同步服务器。");
|
||||
}
|
||||
};
|
||||
|
||||
const handleContinueInCanvas = () => {
|
||||
const payload = buildResultPayload();
|
||||
if (!payload) return;
|
||||
onOpenResultInCanvas?.(payload);
|
||||
setActionNotice("已打开画布继续编辑");
|
||||
};
|
||||
|
||||
const handlePublish = async () => {
|
||||
const payload = buildResultPayload();
|
||||
if (!payload || isPublishing) return;
|
||||
setIsPublishing(true);
|
||||
setActionNotice(null);
|
||||
try {
|
||||
await communityClient.publishCase({
|
||||
title: payload.title,
|
||||
description: payload.prompt || "从工作台生成结果提交的社区作品。",
|
||||
coverUrl: payload.resultUrl,
|
||||
tags: [payload.resultType === "video" ? "视频" : "图片", "Web生成"],
|
||||
metadata: {
|
||||
source: "workbench-result",
|
||||
taskId: payload.taskId,
|
||||
prompt: payload.prompt,
|
||||
resultType: payload.resultType,
|
||||
resultOssKey: payload.resultOssKey || null,
|
||||
resultOriginalUrl: payload.resultOriginalUrl || null,
|
||||
resultMimeType: payload.resultMimeType || null,
|
||||
},
|
||||
assets: [
|
||||
{
|
||||
assetType: payload.resultType,
|
||||
title: payload.title,
|
||||
url: payload.resultUrl,
|
||||
ossKey: payload.resultOssKey,
|
||||
metadata: {
|
||||
prompt: payload.prompt,
|
||||
taskId: payload.taskId,
|
||||
originalUrl: payload.resultOriginalUrl || null,
|
||||
mimeType: payload.resultMimeType || null,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
setActionNotice("已提交社区审核。");
|
||||
} catch (error) {
|
||||
setActionNotice(error instanceof Error ? error.message : "提交社区失败");
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`ai-chat-image-result-card result-card-enter${isVideo ? " is-video" : ""}`}>
|
||||
{hasMedia ? (
|
||||
<div className={`ai-chat-image-frame${isVideo ? " ai-chat-image-frame--video" : ""}${mediaExpired ? " is-expired" : ""}`} style={mediaStyle}>
|
||||
{mediaExpired ? (
|
||||
<div className="ai-chat-media-expired">
|
||||
<span>资源已过期</span>
|
||||
<button type="button" onClick={() => onRegenerate(message)}>
|
||||
<ReloadOutlined /> 重新生成
|
||||
</button>
|
||||
</div>
|
||||
) : isVideo ? (
|
||||
<button type="button" className="ai-chat-video-poster" onClick={openGeneratedMedia}>
|
||||
<video
|
||||
src={message.resultUrl}
|
||||
playsInline
|
||||
muted
|
||||
loop
|
||||
preload="metadata"
|
||||
onError={() => setMediaExpired(true)}
|
||||
/>
|
||||
<span className="ai-chat-video-poster__scrim" />
|
||||
<span className="ai-chat-video-poster__play">
|
||||
<CaretRightOutlined />
|
||||
</span>
|
||||
<span className="ai-chat-video-poster__duration">
|
||||
<ClockCircleOutlined /> {durationTag}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="ai-chat-image-preview-button" onClick={openGeneratedMedia}>
|
||||
<img
|
||||
src={message.resultUrl}
|
||||
alt="生成结果"
|
||||
onError={() => setMediaExpired(true)}
|
||||
onLoad={(event) => {
|
||||
const { naturalWidth, naturalHeight } = event.currentTarget;
|
||||
if (naturalWidth > 0 && naturalHeight > 0) {
|
||||
setMediaRatio(`${naturalWidth} / ${naturalHeight}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="ai-chat-image-result-meta">
|
||||
<div className="ai-chat-image-result-meta__top">
|
||||
<strong>{isVideo ? "视频已生成" : "图像已生成"}</strong>
|
||||
<span>{message.taskStatusLabel || "Completed"}</span>
|
||||
</div>
|
||||
{promptText && <p className="ai-chat-image-result-meta__prompt">{promptText}</p>}
|
||||
<div className="ai-chat-image-result-meta__chips">
|
||||
{modelTag && <span className="ai-chat-chip">{modelTag}</span>}
|
||||
{modeTag && <span className="ai-chat-chip">{modeTag}</span>}
|
||||
</div>
|
||||
{isSuperResolving ? (
|
||||
<div className="ai-chat-image-result-progress" aria-label="视频超分进度">
|
||||
<SmoothedProgressBar
|
||||
progress={message.taskProgress ?? 18}
|
||||
status={message.status || "thinking"}
|
||||
label={message.taskStatusLabel || "超分处理中..."}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="ai-chat-image-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="ai-chat-image-actions__primary"
|
||||
onClick={() => onRegenerate(message)}
|
||||
>
|
||||
<ReloadOutlined /> 重新生成
|
||||
</button>
|
||||
<span className="ai-chat-image-actions__spacer" />
|
||||
<button
|
||||
type="button"
|
||||
className="ai-chat-image-actions__icon"
|
||||
onClick={() => void handleDownload()}
|
||||
disabled={isDownloading}
|
||||
title={isDownloading ? "正在准备下载" : "下载到本地"}
|
||||
aria-label={isDownloading ? "正在准备下载" : "下载到本地"}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
</button>
|
||||
{isVideo && message.resultUrl ? (
|
||||
<button
|
||||
type="button"
|
||||
className="ai-chat-image-actions__icon ai-chat-image-actions__icon--super-resolution"
|
||||
onClick={() => onSuperResolveVideo(message)}
|
||||
disabled={isSuperResolving}
|
||||
title="超分"
|
||||
aria-label="超分"
|
||||
>
|
||||
<ThunderboltOutlined />
|
||||
</button>
|
||||
) : null}
|
||||
{!isVideo && message.resultUrl ? (
|
||||
<button
|
||||
type="button"
|
||||
className="ai-chat-image-actions__icon ai-chat-image-actions__icon--super-resolution"
|
||||
onClick={() => onSuperResolveImage(message)}
|
||||
disabled={isSuperResolving}
|
||||
title="超分"
|
||||
aria-label="超分"
|
||||
>
|
||||
<ThunderboltOutlined />
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" className="ai-chat-image-actions__icon" onClick={handleCopyPrompt}>
|
||||
<CopyOutlined />
|
||||
</button>
|
||||
</div>
|
||||
{hasMedia ? (
|
||||
<div className="ai-chat-result-flow">
|
||||
<button type="button" onClick={() => void handleSaveAsset()}>
|
||||
<AppstoreOutlined /> 存资产
|
||||
</button>
|
||||
<button type="button" onClick={handleContinueInCanvas} disabled={!onOpenResultInCanvas}>
|
||||
<PictureOutlined /> 进画布
|
||||
</button>
|
||||
<button type="button" onClick={() => void handlePublish()} disabled={isPublishing}>
|
||||
<ThunderboltOutlined /> {isPublishing ? "提交中..." : "发社区"}
|
||||
</button>
|
||||
{actionNotice ? <span>{actionNotice}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// ─── ChatAttachmentPreview ────────────────────────────────────────────────────
|
||||
|
||||
export const ChatAttachmentPreview = memo(function ChatAttachmentPreview({
|
||||
item,
|
||||
onOpen,
|
||||
}: {
|
||||
item: WorkbenchChatAttachment;
|
||||
onOpen: (item: WorkbenchChatAttachment) => void;
|
||||
}) {
|
||||
const [mediaFailed, setMediaFailed] = useState(false);
|
||||
const urlExpired = !item.previewUrl || item.previewUrl.startsWith("blob:");
|
||||
const hasMedia = !urlExpired && !mediaFailed && (item.kind === "image" || item.kind === "video");
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`ai-chat-attachment-thumb${!hasMedia ? " is-file" : ""}`}
|
||||
onClick={() => hasMedia && onOpen(item)}
|
||||
disabled={!hasMedia}
|
||||
title={`${item.token} ${item.name}`}
|
||||
>
|
||||
<span className="ai-chat-attachment-thumb__media">
|
||||
{hasMedia && item.kind === "image" ? (
|
||||
<img src={item.previewUrl} alt={item.name} loading="lazy" onError={() => setMediaFailed(true)} />
|
||||
) : hasMedia && item.kind === "video" ? (
|
||||
<video src={item.previewUrl} muted playsInline onError={() => setMediaFailed(true)} />
|
||||
) : (
|
||||
<span className="ai-chat-attachment-thumb__icon">
|
||||
{item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="ai-chat-attachment-thumb__label">{item.token}</span>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
// ─── GenerationPendingCard ────────────────────────────────────────────────────
|
||||
|
||||
export const GenerationPendingCard = memo(function GenerationPendingCard({
|
||||
message,
|
||||
onStop,
|
||||
}: {
|
||||
message: WorkbenchChatMessage;
|
||||
onStop?: () => void;
|
||||
}) {
|
||||
const specs = message.result?.specs || [];
|
||||
const prompt = message.prompt || message.body;
|
||||
const isVideo = message.mode === "video";
|
||||
const smoothed = useSmoothedProgress(message.taskProgress ?? 5, message.status === "thinking" ? "running" : "completed");
|
||||
|
||||
return (
|
||||
<div className={`ai-generation-pending-card${isVideo ? " is-video" : " is-image"}`}>
|
||||
<div className="ai-generation-pending-card__stage">
|
||||
<div className="ai-generation-pending-card__grid" />
|
||||
<div className="ai-generation-pending-card__glow" />
|
||||
<div className="ai-generation-pending-card__loader">
|
||||
<span className="ai-generation-pending-card__ring" />
|
||||
<em className="ai-generation-pending-card__percent">{smoothed}%</em>
|
||||
</div>
|
||||
<div className="ai-generation-pending-card__scan" />
|
||||
</div>
|
||||
<div className="ai-generation-pending-card__meta">
|
||||
<div>
|
||||
<strong>{message.taskStatusLabel || "Generating..."}</strong>
|
||||
<span>{prompt}</span>
|
||||
</div>
|
||||
{specs.length > 0 && (
|
||||
<div className="ai-generation-pending-card__chips">
|
||||
{specs.slice(0, 3).map((spec) => (
|
||||
<span key={spec}>{spec}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{onStop && (
|
||||
<button type="button" className="ai-generation-pending-card__stop" onClick={onStop} title="终止任务">
|
||||
<StopOutlined /> 终止
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,236 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function renderPlainMarkdownText(text: string, keyPrefix: string): ReactNode[] {
|
||||
const nodes: ReactNode[] = [];
|
||||
const pattern = /https?:\/\/[^\s)]+/g;
|
||||
let cursor = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
if (match.index > cursor) {
|
||||
nodes.push(text.slice(cursor, match.index));
|
||||
}
|
||||
|
||||
const url = match[0];
|
||||
nodes.push(
|
||||
<a key={`${keyPrefix}-link-${match.index}`} href={url} target="_blank" rel="noreferrer">
|
||||
{url}
|
||||
</a>,
|
||||
);
|
||||
cursor = match.index + url.length;
|
||||
}
|
||||
|
||||
if (cursor < text.length) {
|
||||
nodes.push(text.slice(cursor));
|
||||
}
|
||||
|
||||
return nodes.length > 0 ? nodes : [text];
|
||||
}
|
||||
|
||||
export function renderMarkdownInline(text: string, keyPrefix: string): ReactNode[] {
|
||||
const nodes: ReactNode[] = [];
|
||||
const pattern = /(`[^`\n]+`|\*\*[\s\S]+?\*\*|__[\s\S]+?__|~~[\s\S]+?~~|\[[^\]]+\]\(https?:\/\/[^)\s]+\)|https?:\/\/[^\s)]+)/g;
|
||||
let cursor = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
const token = match[0];
|
||||
if (match.index > cursor) {
|
||||
nodes.push(...renderPlainMarkdownText(text.slice(cursor, match.index), `${keyPrefix}-text-${cursor}`));
|
||||
}
|
||||
|
||||
if (token.startsWith("`") && token.endsWith("`")) {
|
||||
nodes.push(<code key={`${keyPrefix}-code-${match.index}`}>{token.slice(1, -1)}</code>);
|
||||
} else if ((token.startsWith("**") && token.endsWith("**")) || (token.startsWith("__") && token.endsWith("__"))) {
|
||||
nodes.push(<strong key={`${keyPrefix}-strong-${match.index}`}>{renderMarkdownInline(token.slice(2, -2), `${keyPrefix}-strong-${match.index}`)}</strong>);
|
||||
} else if (token.startsWith("~~") && token.endsWith("~~")) {
|
||||
nodes.push(<del key={`${keyPrefix}-del-${match.index}`}>{renderMarkdownInline(token.slice(2, -2), `${keyPrefix}-del-${match.index}`)}</del>);
|
||||
} else if (token.startsWith("[") && token.includes("](") && token.endsWith(")")) {
|
||||
const labelEnd = token.indexOf("](");
|
||||
const label = token.slice(1, labelEnd);
|
||||
const href = token.slice(labelEnd + 2, -1);
|
||||
nodes.push(
|
||||
<a key={`${keyPrefix}-md-link-${match.index}`} href={href} target="_blank" rel="noreferrer">
|
||||
{renderMarkdownInline(label, `${keyPrefix}-md-link-label-${match.index}`)}
|
||||
</a>,
|
||||
);
|
||||
} else {
|
||||
nodes.push(
|
||||
<a key={`${keyPrefix}-raw-link-${match.index}`} href={token} target="_blank" rel="noreferrer">
|
||||
{token}
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
|
||||
cursor = match.index + token.length;
|
||||
}
|
||||
|
||||
if (cursor < text.length) {
|
||||
nodes.push(...renderPlainMarkdownText(text.slice(cursor), `${keyPrefix}-text-${cursor}`));
|
||||
}
|
||||
|
||||
return nodes.length > 0 ? nodes : [text];
|
||||
}
|
||||
|
||||
export function splitMarkdownTableRow(line: string): string[] {
|
||||
return line
|
||||
.trim()
|
||||
.replace(/^\|/, "")
|
||||
.replace(/\|$/, "")
|
||||
.split("|")
|
||||
.map((cell) => cell.trim());
|
||||
}
|
||||
|
||||
export function isMarkdownTableDivider(line: string): boolean {
|
||||
return /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
|
||||
}
|
||||
|
||||
export function isMarkdownBlockStart(line: string, nextLine?: string): boolean {
|
||||
const trimmed = line.trim();
|
||||
return (
|
||||
trimmed === "" ||
|
||||
/^```/.test(trimmed) ||
|
||||
/^#{1,4}\s+/.test(trimmed) ||
|
||||
/^>\s?/.test(trimmed) ||
|
||||
/^[-*+]\s+/.test(trimmed) ||
|
||||
/^\d+[.)]\s+/.test(trimmed) ||
|
||||
/^[-*_]{3,}$/.test(trimmed) ||
|
||||
(line.includes("|") && !!nextLine && isMarkdownTableDivider(nextLine))
|
||||
);
|
||||
}
|
||||
|
||||
export function renderMarkdownBlocks(text: string): ReactNode[] {
|
||||
const lines = text.replace(/\r\n?/g, "\n").trim().split("\n");
|
||||
const blocks: ReactNode[] = [];
|
||||
let index = 0;
|
||||
|
||||
while (index < lines.length) {
|
||||
const line = lines[index] ?? "";
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const fenceMatch = trimmed.match(/^```(\S+)?/);
|
||||
if (fenceMatch) {
|
||||
const language = fenceMatch[1] || "";
|
||||
const codeLines: string[] = [];
|
||||
index += 1;
|
||||
while (index < lines.length && !lines[index].trim().startsWith("```")) {
|
||||
codeLines.push(lines[index]);
|
||||
index += 1;
|
||||
}
|
||||
if (index < lines.length) index += 1;
|
||||
blocks.push(
|
||||
<figure key={`code-${index}`} className="ai-chat-markdown-code">
|
||||
{language ? <figcaption>{language}</figcaption> : null}
|
||||
<pre>
|
||||
<code>{codeLines.join("\n")}</code>
|
||||
</pre>
|
||||
</figure>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
const headingMatch = trimmed.match(/^(#{1,4})\s+(.+)$/);
|
||||
if (headingMatch) {
|
||||
const level = Math.min(headingMatch[1].length, 4);
|
||||
const Tag = `h${level}` as keyof JSX.IntrinsicElements;
|
||||
blocks.push(<Tag key={`heading-${index}`}>{renderMarkdownInline(headingMatch[2], `heading-${index}`)}</Tag>);
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^[-*_]{3,}$/.test(trimmed)) {
|
||||
blocks.push(<hr key={`rule-${index}`} />);
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (line.includes("|") && index + 1 < lines.length && isMarkdownTableDivider(lines[index + 1])) {
|
||||
const headers = splitMarkdownTableRow(line);
|
||||
const rows: string[][] = [];
|
||||
index += 2;
|
||||
while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
|
||||
rows.push(splitMarkdownTableRow(lines[index]));
|
||||
index += 1;
|
||||
}
|
||||
blocks.push(
|
||||
<div key={`table-${index}`} className="ai-chat-markdown-table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map((header, cellIndex) => (
|
||||
<th key={`table-head-${cellIndex}`}>{renderMarkdownInline(header, `table-head-${cellIndex}`)}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, rowIndex) => (
|
||||
<tr key={`table-row-${rowIndex}`}>
|
||||
{headers.map((_, cellIndex) => (
|
||||
<td key={`table-cell-${rowIndex}-${cellIndex}`}>
|
||||
{renderMarkdownInline(row[cellIndex] || "", `table-cell-${rowIndex}-${cellIndex}`)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^>\s?/.test(trimmed)) {
|
||||
const quoteLines: string[] = [];
|
||||
while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
|
||||
quoteLines.push(lines[index].trim().replace(/^>\s?/, ""));
|
||||
index += 1;
|
||||
}
|
||||
blocks.push(
|
||||
<blockquote key={`quote-${index}`}>
|
||||
{quoteLines.map((quoteLine, quoteIndex) => (
|
||||
<p key={`quote-line-${quoteIndex}`}>{renderMarkdownInline(quoteLine, `quote-${index}-${quoteIndex}`)}</p>
|
||||
))}
|
||||
</blockquote>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
const unorderedMatch = trimmed.match(/^[-*+]\s+(.+)$/);
|
||||
const orderedMatch = trimmed.match(/^\d+[.)]\s+(.+)$/);
|
||||
if (unorderedMatch || orderedMatch) {
|
||||
const ordered = Boolean(orderedMatch);
|
||||
const ListTag = ordered ? "ol" : "ul";
|
||||
const items: string[] = [];
|
||||
while (index < lines.length) {
|
||||
const itemMatch = ordered ? lines[index].trim().match(/^\d+[.)]\s+(.+)$/) : lines[index].trim().match(/^[-*+]\s+(.+)$/);
|
||||
if (!itemMatch) break;
|
||||
items.push(itemMatch[1]);
|
||||
index += 1;
|
||||
}
|
||||
blocks.push(
|
||||
<ListTag key={`list-${index}`}>
|
||||
{items.map((item, itemIndex) => (
|
||||
<li key={`list-item-${itemIndex}`}>{renderMarkdownInline(item, `list-${index}-${itemIndex}`)}</li>
|
||||
))}
|
||||
</ListTag>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
const paragraphLines: string[] = [line];
|
||||
index += 1;
|
||||
while (index < lines.length && !isMarkdownBlockStart(lines[index], lines[index + 1])) {
|
||||
paragraphLines.push(lines[index]);
|
||||
index += 1;
|
||||
}
|
||||
const paragraphText = paragraphLines.join("\n").trim();
|
||||
blocks.push(<p key={`paragraph-${index}`}>{renderMarkdownInline(paragraphText, `paragraph-${index}`)}</p>);
|
||||
}
|
||||
|
||||
return blocks;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Generic single-task keep-alive for tool pages.
|
||||
* Persists task state to localStorage so in-progress tasks survive page switches.
|
||||
*/
|
||||
|
||||
import { waitForTask } from "../../api/taskSubscription";
|
||||
|
||||
const KEEPALIVE_PREFIX = "omniai:tool-task:";
|
||||
|
||||
interface ToolTaskKeepalive {
|
||||
taskId: string;
|
||||
resultUrl: string;
|
||||
resultPreview: string;
|
||||
status: string;
|
||||
progress: number;
|
||||
sourceName: string;
|
||||
sourceUrl: string;
|
||||
savedAt: number;
|
||||
}
|
||||
|
||||
export function saveToolTaskState(key: string, state: {
|
||||
taskId: string;
|
||||
resultUrl?: string;
|
||||
resultPreview?: string;
|
||||
status?: string;
|
||||
progress?: number;
|
||||
sourceName?: string;
|
||||
sourceUrl?: string;
|
||||
}): void {
|
||||
if (!state.taskId) return;
|
||||
try {
|
||||
const entry: ToolTaskKeepalive = {
|
||||
taskId: state.taskId,
|
||||
resultUrl: state.resultUrl || "",
|
||||
resultPreview: state.resultPreview || "",
|
||||
status: state.status || "",
|
||||
progress: state.progress || 0,
|
||||
sourceName: state.sourceName || "",
|
||||
sourceUrl: state.sourceUrl || "",
|
||||
savedAt: Date.now(),
|
||||
};
|
||||
window.localStorage.setItem(KEEPALIVE_PREFIX + key, JSON.stringify(entry));
|
||||
} catch { /* quota */ }
|
||||
}
|
||||
|
||||
export function loadToolTaskState(key: string): ToolTaskKeepalive | null {
|
||||
try {
|
||||
const raw = window.localStorage.getItem(KEEPALIVE_PREFIX + key);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as ToolTaskKeepalive;
|
||||
if (Date.now() - (parsed.savedAt || 0) > 2 * 60 * 60 * 1000) {
|
||||
clearToolTaskState(key);
|
||||
return null;
|
||||
}
|
||||
if (!parsed.taskId) return null;
|
||||
return parsed;
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
export function clearToolTaskState(key: string): void {
|
||||
try { window.localStorage.removeItem(KEEPALIVE_PREFIX + key); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
export async function pollTaskUntilDone(
|
||||
taskId: string,
|
||||
onProgress?: (progress: number) => void,
|
||||
abortRef?: { current: boolean },
|
||||
kind: "image" | "video" = "video",
|
||||
): Promise<string | null> {
|
||||
try {
|
||||
return await waitForTask(taskId, {
|
||||
kind,
|
||||
abortRef,
|
||||
onProgress: (event) => onProgress?.(Math.min(99, Number(event.progress || 0))),
|
||||
});
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { assetClient } from "../../api/assetClient";
|
||||
import type { WebAssetItem } from "../../types";
|
||||
import { saveAssetToLocalLibrary } from "../assets/localAssetStore";
|
||||
import { downloadResultAsset } from "./workbenchDownload";
|
||||
|
||||
export interface ToolResultAssetInput {
|
||||
url: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
type: WebAssetItem["type"];
|
||||
isVideo?: boolean;
|
||||
taskId?: string;
|
||||
tags?: string[];
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export async function saveToolResultToLocal(input: ToolResultAssetInput) {
|
||||
return downloadResultAsset(input.url, input.name, Boolean(input.isVideo), input.taskId);
|
||||
}
|
||||
|
||||
export async function addToolResultToAssetLibrary(input: ToolResultAssetInput): Promise<"server" | "local"> {
|
||||
const description = input.description || "从工具盒生成结果加入的素材。";
|
||||
const tags = input.tags?.length ? input.tags : ["工具盒", input.isVideo ? "生成视频" : "生成图片"];
|
||||
|
||||
saveAssetToLocalLibrary({
|
||||
type: input.type,
|
||||
name: input.name,
|
||||
description,
|
||||
url: input.url,
|
||||
imageUrl: input.url,
|
||||
tags,
|
||||
});
|
||||
|
||||
try {
|
||||
await assetClient.create({
|
||||
type: input.type,
|
||||
name: input.name,
|
||||
description,
|
||||
url: input.url,
|
||||
imageUrl: input.url,
|
||||
tags,
|
||||
sourceTaskId: input.taskId,
|
||||
metadata: {
|
||||
source: "toolbox-result",
|
||||
resultType: input.isVideo ? "video" : "image",
|
||||
...input.metadata,
|
||||
},
|
||||
});
|
||||
return "server";
|
||||
} catch {
|
||||
return "local";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { GenerationLifecycleStatus, TaskRefundStatus, TextTokenUsage } from "../../utils/taskLifecycle";
|
||||
|
||||
export type WorkbenchMode = "chat" | "image" | "video";
|
||||
|
||||
export interface WorkbenchChatAttachment {
|
||||
kind: "image" | "video" | "audio" | "file";
|
||||
name: string;
|
||||
token: string;
|
||||
previewUrl?: string;
|
||||
remoteUrl?: string;
|
||||
}
|
||||
|
||||
export interface WorkbenchChatMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
author: string;
|
||||
mode: WorkbenchMode;
|
||||
body: string;
|
||||
prompt?: string;
|
||||
createdAt: string;
|
||||
status?: "thinking" | "queued" | "completed" | "failed" | "stopping" | "local_timeout";
|
||||
taskLifecycleStatus?: GenerationLifecycleStatus;
|
||||
taskRefundStatus?: TaskRefundStatus;
|
||||
taskUsage?: TextTokenUsage;
|
||||
taskId?: string;
|
||||
conversationId?: number;
|
||||
taskProgress?: number;
|
||||
taskStatusLabel?: string;
|
||||
attachments?: WorkbenchChatAttachment[];
|
||||
resultUrl?: string;
|
||||
resultType?: "image" | "video";
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
result?: {
|
||||
title: string;
|
||||
summary: string;
|
||||
specs: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface WorkbenchResultActionPayload {
|
||||
title: string;
|
||||
prompt: string;
|
||||
resultUrl: string;
|
||||
resultType: "image" | "video";
|
||||
taskId?: string;
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
import { isServerRequestError } from "../../api/serverConnection";
|
||||
import { ENTERPRISE_VIDEO_MODEL_OPTIONS } from "../../utils/enterpriseVideoPolicy";
|
||||
import type { WebGenerationPreviewTask } from "../../types";
|
||||
import type { GenerationLifecycleStatus, TaskRefundStatus, TextTokenUsage } from "../../utils/taskLifecycle";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export type WorkbenchMode = "chat" | "image" | "video";
|
||||
export type ToolbarMenuId =
|
||||
| "studio-mode"
|
||||
| "chat-model"
|
||||
| "chat-speed"
|
||||
| "chat-depth"
|
||||
| "image-model"
|
||||
| "image-settings"
|
||||
| "image-grid-mode"
|
||||
| "video-model"
|
||||
| "video-mode"
|
||||
| "video-ratio"
|
||||
| "video-duration"
|
||||
| "video-quality"
|
||||
| null;
|
||||
export type ReferenceKind = "image" | "video" | "audio" | "file";
|
||||
|
||||
export interface WorkbenchOption {
|
||||
value: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
export interface WorkbenchFieldGroup {
|
||||
label: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
onChange: (value: string) => void;
|
||||
kind?: "ratio" | "pill";
|
||||
columns?: 2 | 3 | 4;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
|
||||
export interface ReferenceItem {
|
||||
id: string;
|
||||
kind: ReferenceKind;
|
||||
name: string;
|
||||
previewUrl?: string;
|
||||
file?: File;
|
||||
remoteUrl?: string;
|
||||
token: string;
|
||||
fingerprint?: string;
|
||||
originalSize?: number;
|
||||
compressed?: boolean;
|
||||
}
|
||||
|
||||
export type PromptMentionItem = Pick<ReferenceItem, "token" | "id" | "name" | "kind" | "previewUrl" | "remoteUrl">;
|
||||
|
||||
export interface PromptMentionTokenRange {
|
||||
start: number;
|
||||
end: number;
|
||||
item: PromptMentionItem;
|
||||
}
|
||||
|
||||
export interface ChatAttachment {
|
||||
kind: ReferenceKind;
|
||||
name: string;
|
||||
token: string;
|
||||
previewUrl?: string;
|
||||
remoteUrl?: string;
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
author: string;
|
||||
mode: WorkbenchMode;
|
||||
body: string;
|
||||
prompt?: string;
|
||||
createdAt: string;
|
||||
status?: "thinking" | "queued" | "completed" | "failed" | "stopping" | "local_timeout";
|
||||
taskLifecycleStatus?: GenerationLifecycleStatus;
|
||||
taskRefundStatus?: TaskRefundStatus;
|
||||
taskUsage?: TextTokenUsage;
|
||||
taskId?: string;
|
||||
conversationId?: number;
|
||||
taskProgress?: number;
|
||||
taskStatusLabel?: string;
|
||||
attachments?: ChatAttachment[];
|
||||
resultUrl?: string;
|
||||
resultType?: "image" | "video";
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
result?: {
|
||||
title: string;
|
||||
summary: string;
|
||||
specs: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface DeleteDialogState {
|
||||
projectId: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface WorkbenchKeepaliveTask {
|
||||
taskId: string;
|
||||
conversationId: number;
|
||||
assistantMessageId: string;
|
||||
concurrencySlotId?: string;
|
||||
operation?: "generation" | "video-super-resolution";
|
||||
mode: "image" | "video";
|
||||
modelLabel: string;
|
||||
specs: string[];
|
||||
referenceCount: number;
|
||||
progress: number;
|
||||
statusLabel: string;
|
||||
startedAt: number;
|
||||
}
|
||||
|
||||
export interface WorkbenchResultActionPayload {
|
||||
title: string;
|
||||
prompt: string;
|
||||
resultUrl: string;
|
||||
resultType: "image" | "video";
|
||||
taskId?: string;
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
}
|
||||
|
||||
// ─── Constants ───────────────────────────────────────────────────────
|
||||
|
||||
export const MESSAGE_STORAGE_KEY = "omniai-web-workbench-messages";
|
||||
export const ACTIVE_CONVERSATION_STORAGE_KEY = "omniai-web-workbench-active-conversation-id";
|
||||
export const PROMPT_HISTORY_STORAGE_KEY = "omniai-web-workbench-prompt-history";
|
||||
export const TASK_KEEPALIVE_STORAGE_KEY = "omniai-web-workbench-active-tasks";
|
||||
export const WORKBENCH_TASK_STALE_MS = 6 * 60 * 60 * 1000;
|
||||
export const WORKBENCH_TASK_MAX_POLL_FAILURES = 10;
|
||||
export const REFERENCE_IMAGE_COMPRESS_THRESHOLD = 10 * 1024 * 1024;
|
||||
export const REFERENCE_IMAGE_MAX_DIMENSION = 1920;
|
||||
export const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
|
||||
export const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
|
||||
export const CHAT_MODEL = "gemini-3.1-pro";
|
||||
|
||||
export const CHAT_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "gemini", label: "Gemini" },
|
||||
{ value: "wanxian", label: "万相" },
|
||||
{ value: "deepseek", label: "DeepSeek" },
|
||||
];
|
||||
|
||||
export const THINKING_SPEED_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "default", label: "默认" },
|
||||
{ value: "high", label: "思考速度：高" },
|
||||
{ value: "ultra", label: "思考速度：急速" },
|
||||
];
|
||||
|
||||
export const THINKING_DEPTH_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "default", label: "默认" },
|
||||
{ value: "strong", label: "推理深度：强" },
|
||||
{ value: "extreme", label: "推理深度：极限" },
|
||||
];
|
||||
|
||||
export const CHAT_NATURAL_SYSTEM_PROMPT = [
|
||||
"你是 OmniAI 的创作协作助手，像一个正在一起工作的同伴一样说话。",
|
||||
`默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。`,
|
||||
"先直接回应用户当前关心的点；需要拆解时，用短段落或少量要点，把下一步说清楚。",
|
||||
`不说“作为一个 AI”，不做空泛总结，不编造不确定的信息。`,
|
||||
"当用户在排查问题或调整页面时，优先给判断、原因和可执行的下一步。",
|
||||
].join("\n");
|
||||
|
||||
export const CHAT_TURN_STYLE_REMINDER = [
|
||||
"本轮回答继续保持像正常人协作的口吻：",
|
||||
`不要以"好的，以下是""当然可以""根据你的需求"这类模板开头。`,
|
||||
"能一句话说清就先一句话说清；需要展开时再分点。",
|
||||
"少用宏大标题，多用具体判断和下一步动作。",
|
||||
].join("\n");
|
||||
|
||||
export const NON_CONVERSATIONAL_ASSISTANT_TEXT = new Set([
|
||||
"我先看一下上下文，马上接上。",
|
||||
"我在整理，马上说清楚。",
|
||||
"正在读取当前模式、模型、规格和参考素材，准备创建生成任务。",
|
||||
"Task submitted, generating...",
|
||||
"任务已提交，正在生成中...",
|
||||
"AI 正在整理回答...",
|
||||
]);
|
||||
|
||||
export const MODE_META: Record<
|
||||
WorkbenchMode,
|
||||
{
|
||||
label: string;
|
||||
menuLabel: string;
|
||||
accent: string;
|
||||
placeholder: string;
|
||||
description: string;
|
||||
subline: string;
|
||||
taskType: WebGenerationPreviewTask["type"];
|
||||
}
|
||||
> = {
|
||||
chat: {
|
||||
label: "OmniChat",
|
||||
menuLabel: "对话模式",
|
||||
accent: "#6be7ff",
|
||||
placeholder: "把创意、脚本、素材要求或工作流目标发给我",
|
||||
description: "直接对话、拆解需求、整理上下文，并把想法推进到可执行结果。",
|
||||
subline: "适合连续协作、问答推演、脚本整理和工作流规划。",
|
||||
taskType: "agent",
|
||||
},
|
||||
image: {
|
||||
label: "图像生成",
|
||||
menuLabel: "图像生成",
|
||||
accent: "#00b1cc",
|
||||
placeholder: "描述角色、场景、商品图、首帧或尾帧画面",
|
||||
description: "在同一界面完成文生图、图生图、参考图管理和候选筛选。",
|
||||
subline: "模型、比例、清晰度和多宫格保持在同一条工作链里。",
|
||||
taskType: "image",
|
||||
},
|
||||
video: {
|
||||
label: "视频生成",
|
||||
menuLabel: "视频生成",
|
||||
accent: "#2197ff",
|
||||
placeholder: "描述成片目标、人物、场景、镜头运动、节奏、比例和时长",
|
||||
description: "用统一工作台管理起始帧、动作描述、镜头节奏和视频输出。",
|
||||
subline: "支持首尾帧、参考素材、比例、时长和画质等关键设置。",
|
||||
taskType: "video",
|
||||
},
|
||||
};
|
||||
|
||||
export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as WorkbenchMode[]).map((mode) => ({
|
||||
value: mode,
|
||||
label: MODE_META[mode].menuLabel,
|
||||
description: MODE_META[mode].subline,
|
||||
}));
|
||||
|
||||
export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7" },
|
||||
{ value: "gpt-image-2", label: "omni-GPT" },
|
||||
{ value: "gpt-image-2-vip", label: "omni-GPT VIP" },
|
||||
{ value: "nano-banana-pro", label: "omni-水果 Pro" },
|
||||
{ value: "nano-banana-2", label: "omni-水果 2" },
|
||||
{ value: "nano-banana-fast", label: "omni-水果" },
|
||||
];
|
||||
|
||||
export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
|
||||
export const RATIO_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "21:9", label: "21:9" },
|
||||
{ value: "16:9", label: "16:9" },
|
||||
{ value: "4:3", label: "4:3" },
|
||||
{ value: "1:1", label: "1:1" },
|
||||
{ value: "3:4", label: "3:4" },
|
||||
{ value: "9:16", label: "9:16" },
|
||||
];
|
||||
|
||||
export const GRID_MODE_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "single", label: "单图" },
|
||||
{ value: "grid-4", label: "4 宫格" },
|
||||
{ value: "grid-9", label: "9 宫格" },
|
||||
{ value: "grid-25", label: "25 宫格" },
|
||||
];
|
||||
|
||||
export const GRID_SUPPORTED_MODELS = new Set([
|
||||
"wan2.7-image-pro",
|
||||
"wan2.7-image",
|
||||
"gpt-image-2",
|
||||
"gpt-image-2-vip",
|
||||
]);
|
||||
|
||||
export const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "omni", label: "全能参考" },
|
||||
{ value: "start-end", label: "首尾帧" },
|
||||
];
|
||||
|
||||
export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "5", label: "5s" },
|
||||
{ value: "6", label: "6s" },
|
||||
{ value: "7", label: "7s" },
|
||||
{ value: "8", label: "8s" },
|
||||
{ value: "9", label: "9s" },
|
||||
{ value: "10", label: "10s" },
|
||||
{ value: "11", label: "11s" },
|
||||
{ value: "12", label: "12s" },
|
||||
{ value: "13", label: "13s" },
|
||||
{ value: "14", label: "14s" },
|
||||
{ value: "15", label: "15s" },
|
||||
];
|
||||
|
||||
// ─── Shared helpers ──────────────────────────────────────────────────
|
||||
|
||||
export function getCachedRole(): string {
|
||||
try {
|
||||
const raw = window.localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "";
|
||||
return String(JSON.parse(raw)?.user?.role || "").trim().toLowerCase();
|
||||
} catch { return ""; }
|
||||
}
|
||||
|
||||
export function getSessionUserId(): string {
|
||||
try {
|
||||
const raw = window.localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "anon";
|
||||
const id = JSON.parse(raw)?.user?.id;
|
||||
return id ? String(id) : "anon";
|
||||
} catch { return "anon"; }
|
||||
}
|
||||
|
||||
export function userKey(base: string): string {
|
||||
return `${base}:${getSessionUserId()}`;
|
||||
}
|
||||
|
||||
export function createId(prefix: string) {
|
||||
return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
export function formatWorkbenchTimestamp(date = new Date()): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
export function parseWorkbenchTimestampValue(value: string): number {
|
||||
const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/);
|
||||
if (matched) {
|
||||
const [, year, month, day, hours, minutes] = matched;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes)).getTime();
|
||||
}
|
||||
const parsed = Date.parse(value);
|
||||
return Number.isFinite(parsed) ? parsed : NaN;
|
||||
}
|
||||
|
||||
export function buildChatAttachments(items: ReferenceItem[]): ChatAttachment[] {
|
||||
return items.map((item) => ({
|
||||
kind: item.kind,
|
||||
name: item.name,
|
||||
token: item.token,
|
||||
previewUrl: item.remoteUrl || item.previewUrl,
|
||||
remoteUrl: item.remoteUrl,
|
||||
}));
|
||||
}
|
||||
|
||||
export function buildNaturalChatHistoryMessages(messages: ChatMessage[]): Array<{ role: "user" | "assistant"; content: string }> {
|
||||
return messages
|
||||
.filter((message) => {
|
||||
const body = message.body.trim();
|
||||
if (!body) return false;
|
||||
if (message.role === "user") return true;
|
||||
if (message.mode !== "chat") return false;
|
||||
if (message.status === "thinking" || message.status === "queued") return false;
|
||||
if (NON_CONVERSATIONAL_ASSISTANT_TEXT.has(body)) return false;
|
||||
return true;
|
||||
})
|
||||
.slice(-10)
|
||||
.map((message) => ({
|
||||
role: message.role,
|
||||
content: message.body.trim(),
|
||||
}));
|
||||
}
|
||||
|
||||
export function getErrorText(error: unknown): string {
|
||||
return error instanceof Error ? error.message : String(error || "Unknown error");
|
||||
}
|
||||
|
||||
export function isAuthFailure(error: unknown): boolean {
|
||||
return isServerRequestError(error) && (error.status === 401 || error.status === 403);
|
||||
}
|
||||
|
||||
export function isInsufficientBalance(error: unknown): boolean {
|
||||
if (isServerRequestError(error) && error.status === 402) return true;
|
||||
const msg = error instanceof Error ? error.message : String(error || "");
|
||||
return /余额不足|积分不足|insufficient.?balance/i.test(msg);
|
||||
}
|
||||
|
||||
export function isInsufficientBalanceMessage(msg: string | undefined | null): boolean {
|
||||
if (!msg) return false;
|
||||
return /余额不足|积分不足|insufficient.?balance/i.test(msg);
|
||||
}
|
||||
|
||||
export function isTransientMessage(message: ChatMessage): boolean {
|
||||
return (message.status === "thinking" || message.status === "queued") && !message.taskId;
|
||||
}
|
||||
|
||||
export function getPersistableMessages(messages: ChatMessage[]): ChatMessage[] {
|
||||
return messages.filter((message, index) => {
|
||||
if (isTransientMessage(message)) return false;
|
||||
if (message.role === "assistant") return true;
|
||||
const nextMessage = messages[index + 1];
|
||||
return (
|
||||
nextMessage?.role === "assistant" &&
|
||||
nextMessage.conversationId === message.conversationId &&
|
||||
!isTransientMessage(nextMessage)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function shouldPersistPatch(patch: Partial<ChatMessage>): boolean {
|
||||
return (
|
||||
patch.status === "completed" ||
|
||||
patch.status === "failed" ||
|
||||
patch.status === "local_timeout" ||
|
||||
patch.status === "stopping" ||
|
||||
typeof patch.taskId === "string" ||
|
||||
typeof patch.resultUrl === "string" ||
|
||||
typeof patch.resultOssKey === "string" ||
|
||||
typeof patch.resultOriginalUrl === "string" ||
|
||||
typeof patch.resultMimeType === "string" ||
|
||||
typeof patch.taskRefundStatus === "string" ||
|
||||
typeof patch.taskLifecycleStatus === "string" ||
|
||||
typeof patch.taskUsage === "object"
|
||||
);
|
||||
}
|
||||
|
||||
export function buildAssistantResult(
|
||||
mode: WorkbenchMode,
|
||||
model: string,
|
||||
specs: string[],
|
||||
referenceCount: number,
|
||||
): ChatMessage["result"] {
|
||||
if (mode === "image") {
|
||||
return {
|
||||
title: "图像任务已创建",
|
||||
summary: referenceCount > 0 ? "已携带参考图，后续结果会进入资产库和画布。" : "已按当前模型和规格进入图像生成流程。",
|
||||
specs,
|
||||
};
|
||||
}
|
||||
|
||||
if (mode === "video") {
|
||||
return {
|
||||
title: "视频任务已创建",
|
||||
summary: referenceCount > 0 ? "已携带参考素材，生成后可继续拆分镜头并发布案例。" : "已按当前镜头设置进入视频生成流程。",
|
||||
specs,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: "Agent 已接管",
|
||||
summary: "我会把当前输入整理成脚本、分镜、素材需求和可复制的工作流节点。",
|
||||
specs: [model, ...specs],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
import { buildApiUrl, buildAuthHeaders } from "../../api/serverConnection";
|
||||
|
||||
function sanitizeDownloadFilename(value: string, fallback: string) {
|
||||
const normalized = value
|
||||
.trim()
|
||||
.replace(/[\\/:*?"<>|]+/g, "-")
|
||||
.replace(/\s+/g, " ")
|
||||
.slice(0, 80)
|
||||
.trim();
|
||||
return normalized || fallback;
|
||||
}
|
||||
|
||||
function getResultDownloadExtension(url: string, contentType: string | null, isVideo: boolean) {
|
||||
const mime = (contentType || "").split(";")[0]?.trim().toLowerCase();
|
||||
if (mime === "image/jpeg") return "jpg";
|
||||
if (mime === "image/png") return "png";
|
||||
if (mime === "image/webp") return "webp";
|
||||
if (mime === "image/gif") return "gif";
|
||||
if (mime === "video/webm") return "webm";
|
||||
if (mime === "video/quicktime") return "mov";
|
||||
if (mime === "video/mp4") return "mp4";
|
||||
|
||||
try {
|
||||
const pathname = new URL(url, window.location.href).pathname;
|
||||
const matched = pathname.match(/\.([a-z0-9]{2,5})$/i);
|
||||
if (matched?.[1]) return matched[1].toLowerCase();
|
||||
} catch {
|
||||
// Keep the fallback below for malformed but still browser-loadable URLs.
|
||||
}
|
||||
|
||||
return isVideo ? "mp4" : "png";
|
||||
}
|
||||
|
||||
type LocalFilePickerWritable = {
|
||||
write: (data: Blob) => Promise<void>;
|
||||
close: () => Promise<void>;
|
||||
};
|
||||
|
||||
type LocalFilePickerHandle = {
|
||||
createWritable: () => Promise<LocalFilePickerWritable>;
|
||||
};
|
||||
|
||||
type LocalFilePickerWindow = Window & {
|
||||
showSaveFilePicker?: (options?: {
|
||||
suggestedName?: string;
|
||||
types?: Array<{
|
||||
description: string;
|
||||
accept: Record<string, string[]>;
|
||||
}>;
|
||||
}) => Promise<LocalFilePickerHandle>;
|
||||
};
|
||||
|
||||
async function saveBlobToLocal(blob: Blob, filename: string, isVideo: boolean): Promise<"saved" | "started"> {
|
||||
const startBrowserDownload = () => {
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = objectUrl;
|
||||
anchor.download = filename;
|
||||
anchor.rel = "noopener";
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
|
||||
return "started" as const;
|
||||
};
|
||||
|
||||
const savePicker = (window as LocalFilePickerWindow).showSaveFilePicker;
|
||||
if (savePicker) {
|
||||
try {
|
||||
const pickerTypes = [
|
||||
isVideo
|
||||
? { description: "Video", accept: { [blob.type || "video/mp4"]: [`.${filename.split(".").pop() || "mp4"}`] } }
|
||||
: { description: "Image", accept: { [blob.type || "image/png"]: [`.${filename.split(".").pop() || "png"}`] } },
|
||||
];
|
||||
const handle = await savePicker({ suggestedName: filename, types: pickerTypes });
|
||||
const writable = await handle.createWritable();
|
||||
await writable.write(blob);
|
||||
await writable.close();
|
||||
return "saved";
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException && error.name === "AbortError") throw error;
|
||||
return startBrowserDownload();
|
||||
}
|
||||
}
|
||||
|
||||
return startBrowserDownload();
|
||||
}
|
||||
|
||||
async function assertDownloadBlobIsUsable(blob: Blob, isVideo: boolean) {
|
||||
const mime = String(blob.type || "").toLowerCase();
|
||||
if (/^(?:application|text)\/(?:json|xml|html|plain)|\+xml/.test(mime)) {
|
||||
throw new Error("下载失败：结果链接已过期或返回了错误内容，请重新生成后再下载。");
|
||||
}
|
||||
|
||||
const header = new Uint8Array(await blob.slice(0, 16).arrayBuffer());
|
||||
const asText = new TextDecoder("utf-8", { fatal: false }).decode(header);
|
||||
const isPng = header[0] === 0x89 && header[1] === 0x50 && header[2] === 0x4e && header[3] === 0x47;
|
||||
const isJpeg = header[0] === 0xff && header[1] === 0xd8 && header[2] === 0xff;
|
||||
const isGif = asText.startsWith("GIF8");
|
||||
const isWebp = asText.startsWith("RIFF") && asText.slice(8, 12) === "WEBP";
|
||||
const isMp4 = asText.slice(4, 8) === "ftyp";
|
||||
const looksLikeErrorDocument = asText.startsWith("<?xml") || asText.startsWith("<Error") || asText.startsWith("{\"") || asText.startsWith("<!DO");
|
||||
|
||||
if (looksLikeErrorDocument) {
|
||||
throw new Error("下载失败：结果链接已过期或返回了错误内容，请重新生成后再下载。");
|
||||
}
|
||||
|
||||
const hasExpectedMagic = isVideo ? isMp4 || mime.startsWith("video/") : isPng || isJpeg || isGif || isWebp || mime.startsWith("image/");
|
||||
if (!hasExpectedMagic) {
|
||||
throw new Error("下载失败：未收到有效的媒体文件。");
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadResultAsset(url: string, filenameBase: string, isVideo: boolean, taskId?: string): Promise<"saved" | "started"> {
|
||||
let blob: Blob | null = null;
|
||||
let contentType: string | null = null;
|
||||
|
||||
if (taskId) {
|
||||
try {
|
||||
const result = await aiGenerationClient.downloadTaskResult(taskId);
|
||||
blob = result.blob;
|
||||
contentType = result.contentType || result.blob.type || null;
|
||||
} catch {
|
||||
blob = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (!blob) {
|
||||
const needsProxy = /aliyuncs\.com/i.test(url);
|
||||
const fetchUrl = needsProxy
|
||||
? buildApiUrl(`ai/proxy-download?url=${encodeURIComponent(url)}`)
|
||||
: url;
|
||||
const fetchOpts: RequestInit = needsProxy
|
||||
? { headers: buildAuthHeaders() }
|
||||
: { credentials: "omit" };
|
||||
const response = await fetch(fetchUrl, fetchOpts);
|
||||
if (!response.ok) {
|
||||
throw new Error(`下载失败：资源请求返回 ${response.status}`);
|
||||
}
|
||||
blob = await response.blob();
|
||||
contentType = blob.type || response.headers.get("content-type");
|
||||
}
|
||||
|
||||
if (!blob.size) {
|
||||
throw new Error("下载失败：资源内容为空");
|
||||
}
|
||||
await assertDownloadBlobIsUsable(blob, isVideo);
|
||||
|
||||
const extension = getResultDownloadExtension(url, contentType, isVideo);
|
||||
const filename = `${sanitizeDownloadFilename(filenameBase, isVideo ? "generated-video" : "generated-image")}.${extension}`;
|
||||
return saveBlobToLocal(blob, filename, isVideo);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { PromptMentionItem, PromptMentionTokenRange } from "./workbenchConstants";
|
||||
|
||||
export function escapeRegExp(value: string) {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
export function normalizePromptWhitespace(value: string) {
|
||||
return value.replace(/[ \t]{2,}/g, " ").trim();
|
||||
}
|
||||
|
||||
export function removePromptMentionTokenFromText(text: string, token: string) {
|
||||
if (!token) return text;
|
||||
const escapedToken = escapeRegExp(token);
|
||||
return normalizePromptWhitespace(
|
||||
text.replace(new RegExp(`(^|\\s)${escapedToken}(?=\\s|$)`, "g"), " "),
|
||||
);
|
||||
}
|
||||
|
||||
export function removePromptTextRange(text: string, start: number, end: number) {
|
||||
return normalizePromptWhitespace(`${text.slice(0, start)}${text.slice(end)}`);
|
||||
}
|
||||
|
||||
export function getPromptMentionTokenRanges(text: string, items: PromptMentionItem[]): PromptMentionTokenRange[] {
|
||||
if (!text || !items.length) return [];
|
||||
const ranges: PromptMentionTokenRange[] = [];
|
||||
for (const item of items) {
|
||||
const idx = text.indexOf(item.token);
|
||||
if (idx >= 0) {
|
||||
ranges.push({ start: idx, end: idx + item.token.length, item });
|
||||
}
|
||||
}
|
||||
return ranges.sort((a, b) => a.start - b.start);
|
||||
}
|
||||
|
||||
export function renderPromptPreviewNodes(
|
||||
text: string,
|
||||
items: PromptMentionItem[],
|
||||
): ReactNode[] {
|
||||
if (!text) return [];
|
||||
|
||||
const tokens = Array.from(new Set(items.map((item) => item.token))).sort((a, b) => b.length - a.length);
|
||||
const tokenMap = new Map(items.map((item) => [item.token, item]));
|
||||
const nodes: ReactNode[] = [];
|
||||
let cursor = 0;
|
||||
let index = 0;
|
||||
|
||||
while (cursor < text.length) {
|
||||
const matchedToken = tokens.find((token) => text.startsWith(token, cursor));
|
||||
|
||||
if (matchedToken) {
|
||||
const matchedItem = tokenMap.get(matchedToken);
|
||||
if (matchedItem) {
|
||||
nodes.push(
|
||||
<span key={`mention-${index}`} className="wb-prompt-mention-chip" data-token={matchedItem.token}>
|
||||
{matchedItem.token}
|
||||
</span>,
|
||||
);
|
||||
cursor += matchedToken.length;
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const nextTokenStart = tokens.reduce((closest, token) => {
|
||||
const pos = text.indexOf(token, cursor + 1);
|
||||
return pos >= 0 && (closest < 0 || pos < closest) ? pos : closest;
|
||||
}, -1);
|
||||
|
||||
const end = nextTokenStart >= 0 ? nextTokenStart : text.length;
|
||||
const segment = text.slice(cursor, end);
|
||||
if (segment) {
|
||||
nodes.push(<span key={`text-${index}`}>{segment}</span>);
|
||||
index += 1;
|
||||
}
|
||||
cursor = end;
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import {
|
||||
REFERENCE_IMAGE_COMPRESS_THRESHOLD,
|
||||
REFERENCE_IMAGE_MAX_DIMENSION,
|
||||
REFERENCE_IMAGE_INITIAL_QUALITY,
|
||||
REFERENCE_IMAGE_MIN_QUALITY,
|
||||
type WorkbenchMode,
|
||||
type ReferenceKind,
|
||||
type ReferenceItem,
|
||||
type WorkbenchOption,
|
||||
} from "./workbenchConstants";
|
||||
import { resolvePreUploadedUrl } from "../../api/referenceUploadService";
|
||||
|
||||
export function getRatioOptionClassName(value: string) {
|
||||
return `ai-workbench-ratio-option__preview--${value.replace(":", "-")}`;
|
||||
}
|
||||
|
||||
export function getSettingsGridColumnsClassName(columns: 2 | 3 | 4 = 3) {
|
||||
return `ai-workbench-settings-panel__grid--cols-${columns}`;
|
||||
}
|
||||
|
||||
export function getReferenceAccept(mode: WorkbenchMode, videoFrameMode?: string) {
|
||||
if (mode === "chat") return ".docx,.txt,.md,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp";
|
||||
if (mode === "image") return "image/*";
|
||||
if (videoFrameMode === "start-end") return "image/*";
|
||||
return "image/*,video/mp4,video/quicktime,video/webm,video/x-msvideo,.mp4,.mov,.webm,.avi,audio/mpeg,audio/mp3,audio/wav,audio/x-wav,.mp3,.wav";
|
||||
}
|
||||
|
||||
export function getReferenceUploadLabel(mode: WorkbenchMode) {
|
||||
if (mode === "video") return "参考内容";
|
||||
if (mode === "image") return "参考图";
|
||||
return "附件";
|
||||
}
|
||||
|
||||
export function getReferenceLimit(mode: WorkbenchMode, videoFrameMode?: string) {
|
||||
if (mode === "video" && videoFrameMode === "start-end") return 2;
|
||||
if (mode === "video") return 12;
|
||||
if (mode === "image") return 9;
|
||||
return 4;
|
||||
}
|
||||
|
||||
export function getReferenceKindLabel(kind: ReferenceKind) {
|
||||
if (kind === "image") return "图片";
|
||||
if (kind === "video") return "视频";
|
||||
if (kind === "audio") return "音频";
|
||||
return "附件";
|
||||
}
|
||||
|
||||
export function getReferenceEmptyCopy(mode: WorkbenchMode) {
|
||||
if (mode === "video") return "上传最多12个参考素材，首尾帧模式仅保留2张图片，输入文字或 @ 引用内容，自由组合图、文、音、视频多元素";
|
||||
if (mode === "image") return "最多上传9张参考图，输入文字或 @ 引用内容，控制角色、风格和构图";
|
||||
return "上传附件后可用 @ 引用，帮助 Agent 读取上下文";
|
||||
}
|
||||
|
||||
export function hexToRgbTriplet(hex: string) {
|
||||
const normalized = hex.replace("#", "");
|
||||
const full = normalized.length === 3
|
||||
? normalized
|
||||
.split("")
|
||||
.map((char) => `${char}${char}`)
|
||||
.join("")
|
||||
: normalized;
|
||||
|
||||
const value = Number.parseInt(full, 16);
|
||||
const r = (value >> 16) & 255;
|
||||
const g = (value >> 8) & 255;
|
||||
const b = value & 255;
|
||||
return `${r}, ${g}, ${b}`;
|
||||
}
|
||||
|
||||
export function inferReferenceKind(file: File, mode: WorkbenchMode): ReferenceKind {
|
||||
if (file.type.startsWith("image/")) return "image";
|
||||
if (file.type.startsWith("video/")) return "video";
|
||||
if (file.type.startsWith("audio/")) return "audio";
|
||||
return mode === "chat" ? "file" : "image";
|
||||
}
|
||||
|
||||
export function disposeReferencePreview(item: Pick<ReferenceItem, "previewUrl">) {
|
||||
if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
|
||||
}
|
||||
|
||||
export function fileToDataUrl(file: File) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read reference file"));
|
||||
};
|
||||
reader.onerror = () => reject(reader.error || new Error("Unable to read reference file"));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
export function bytesToHex(buffer: ArrayBuffer) {
|
||||
return Array.from(new Uint8Array(buffer))
|
||||
.map((byte) => byte.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
export async function buildReferenceFingerprint(file: File, kind: ReferenceKind) {
|
||||
if (kind === "image" && window.crypto?.subtle) {
|
||||
const digest = await window.crypto.subtle.digest("SHA-256", await file.arrayBuffer());
|
||||
return `image:${bytesToHex(digest)}`;
|
||||
}
|
||||
return `${kind}:${file.name}:${file.size}:${file.lastModified}:${file.type}`;
|
||||
}
|
||||
|
||||
export function canCompressReferenceImage(file: File) {
|
||||
return (
|
||||
file.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD &&
|
||||
file.type.startsWith("image/") &&
|
||||
!/svg|gif/i.test(file.type)
|
||||
);
|
||||
}
|
||||
|
||||
function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number) {
|
||||
return new Promise<Blob | null>((resolve) => {
|
||||
canvas.toBlob(resolve, type, quality);
|
||||
});
|
||||
}
|
||||
|
||||
function getCompressedImageName(fileName: string) {
|
||||
const baseName = fileName.replace(/\.[^.]+$/, "");
|
||||
return `${baseName || "reference"}.jpg`;
|
||||
}
|
||||
|
||||
export async function compressReferenceImageIfNeeded(file: File) {
|
||||
if (!canCompressReferenceImage(file)) {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
try {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
const scale = Math.min(1, REFERENCE_IMAGE_MAX_DIMENSION / Math.max(bitmap.width, bitmap.height));
|
||||
let width = Math.max(1, Math.round(bitmap.width * scale));
|
||||
let height = Math.max(1, Math.round(bitmap.height * scale));
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) {
|
||||
bitmap.close();
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
const render = () => {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.fillStyle = "#ffffff";
|
||||
context.fillRect(0, 0, width, height);
|
||||
context.drawImage(bitmap, 0, 0, width, height);
|
||||
};
|
||||
|
||||
const encode = async () => {
|
||||
let quality = REFERENCE_IMAGE_INITIAL_QUALITY;
|
||||
let nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
|
||||
while (nextBlob && nextBlob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && quality > REFERENCE_IMAGE_MIN_QUALITY) {
|
||||
quality = Math.max(REFERENCE_IMAGE_MIN_QUALITY, quality - 0.08);
|
||||
nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
|
||||
}
|
||||
return nextBlob;
|
||||
};
|
||||
|
||||
render();
|
||||
let blob = await encode();
|
||||
while (blob && blob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && Math.max(width, height) > 960) {
|
||||
width = Math.max(1, Math.round(width * 0.82));
|
||||
height = Math.max(1, Math.round(height * 0.82));
|
||||
render();
|
||||
blob = await encode();
|
||||
}
|
||||
bitmap.close();
|
||||
|
||||
if (!blob || blob.size >= file.size) {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
return {
|
||||
file: new File([blob], getCompressedImageName(file.name), {
|
||||
type: "image/jpeg",
|
||||
lastModified: file.lastModified,
|
||||
}),
|
||||
compressed: true,
|
||||
};
|
||||
} catch {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
}
|
||||
|
||||
export function buildReferenceToken(kind: ReferenceKind, index: number) {
|
||||
if (kind === "image") return `@图片${index}`;
|
||||
if (kind === "video") return `@视频${index}`;
|
||||
if (kind === "audio") return `@音频${index}`;
|
||||
return `@附件${index}`;
|
||||
}
|
||||
|
||||
export async function resolveReferenceUrls(items: ReferenceItem[]): Promise<string[]> {
|
||||
const tasks = items.map(async (item) => {
|
||||
if (item.remoteUrl) return item.remoteUrl;
|
||||
if (!item.file) {
|
||||
if (item.previewUrl && /^https?:\/\//i.test(item.previewUrl)) {
|
||||
return item.previewUrl;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const url = await resolvePreUploadedUrl(item.file, item.name, item.fingerprint);
|
||||
if (url) {
|
||||
item.remoteUrl = url;
|
||||
return url;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
const results = await Promise.all(tasks);
|
||||
return results.filter((url): url is string => url !== null);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
|
||||
export interface PersistedWorkbenchResultAsset {
|
||||
url: string;
|
||||
originalUrl: string;
|
||||
ossKey?: string;
|
||||
mimeType?: string;
|
||||
}
|
||||
|
||||
interface PersistWorkbenchResultAssetInput {
|
||||
title: string;
|
||||
sourceUrl: string;
|
||||
resultType: "image" | "video";
|
||||
taskId?: string;
|
||||
prompt?: string;
|
||||
originalUrl?: string;
|
||||
existingOssKey?: string | null;
|
||||
mimeType?: string;
|
||||
client?: WorkbenchResultPersistenceClient;
|
||||
}
|
||||
|
||||
interface DownloadedTaskAsset {
|
||||
blob: Blob;
|
||||
filename?: string;
|
||||
contentType?: string;
|
||||
}
|
||||
|
||||
interface FetchLikeResponse {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
headers: {
|
||||
get(name: string): string | null;
|
||||
};
|
||||
blob(): Promise<Blob>;
|
||||
}
|
||||
|
||||
interface WorkbenchResultPersistenceClient {
|
||||
downloadTaskResult(taskId: string): Promise<DownloadedTaskAsset>;
|
||||
uploadAsset(input: {
|
||||
dataUrl: string;
|
||||
name?: string;
|
||||
mimeType?: string;
|
||||
scope?: string;
|
||||
}): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
|
||||
uploadAssetByUrl(input: {
|
||||
sourceUrl: string;
|
||||
name?: string;
|
||||
mimeType?: string;
|
||||
scope?: string;
|
||||
}): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
|
||||
fetchAsset?: (url: string) => Promise<FetchLikeResponse>;
|
||||
}
|
||||
|
||||
function getDefaultClient(): WorkbenchResultPersistenceClient {
|
||||
return {
|
||||
downloadTaskResult: (taskId) => aiGenerationClient.downloadTaskResult(taskId),
|
||||
uploadAsset: (input) => aiGenerationClient.uploadAsset(input),
|
||||
uploadAssetByUrl: (input) => aiGenerationClient.uploadAssetByUrl(input),
|
||||
fetchAsset: (url) => fetch(url, { credentials: "omit" }),
|
||||
};
|
||||
}
|
||||
|
||||
function getGeneratedResultOssKey(url: string): string | null {
|
||||
try {
|
||||
const key = decodeURIComponent(new URL(url, globalThis.location?.href || "http://localhost").pathname.replace(/^\/+/, ""));
|
||||
return /^users\/[^/]+\/generation-results\/.+/i.test(key) ? key : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function createFallbackResult(input: PersistWorkbenchResultAssetInput): PersistedWorkbenchResultAsset {
|
||||
return {
|
||||
url: input.sourceUrl,
|
||||
originalUrl: input.originalUrl || input.sourceUrl,
|
||||
ossKey: input.existingOssKey || getGeneratedResultOssKey(input.sourceUrl) || undefined,
|
||||
mimeType: input.mimeType,
|
||||
};
|
||||
}
|
||||
|
||||
function getResultExtension(url: string, contentType: string | undefined, resultType: "image" | "video") {
|
||||
const mime = (contentType || "").split(";")[0]?.trim().toLowerCase();
|
||||
if (mime === "image/jpeg") return "jpg";
|
||||
if (mime === "image/png") return "png";
|
||||
if (mime === "image/webp") return "webp";
|
||||
if (mime === "image/gif") return "gif";
|
||||
if (mime === "video/webm") return "webm";
|
||||
if (mime === "video/quicktime") return "mov";
|
||||
if (mime === "video/mp4") return "mp4";
|
||||
|
||||
try {
|
||||
const pathname = new URL(url, globalThis.location?.href || "http://localhost").pathname;
|
||||
const matched = pathname.match(/\.([a-z0-9]{2,5})$/i);
|
||||
if (matched?.[1]) return matched[1].toLowerCase();
|
||||
} catch {
|
||||
// Fall through to media-type fallback.
|
||||
}
|
||||
|
||||
return resultType === "video" ? "mp4" : "png";
|
||||
}
|
||||
|
||||
export function buildWorkbenchResultAssetName(
|
||||
title: string,
|
||||
sourceUrl: string,
|
||||
resultType: "image" | "video",
|
||||
contentType?: string,
|
||||
): string {
|
||||
const normalized = title
|
||||
.trim()
|
||||
.replace(/[\\/:*?"<>|]+/g, "-")
|
||||
.replace(/\s+/g, " ")
|
||||
.slice(0, 80)
|
||||
.trim();
|
||||
const base = normalized || (resultType === "video" ? "generated-video" : "generated-image");
|
||||
return `${base}.${getResultExtension(sourceUrl, contentType, resultType)}`;
|
||||
}
|
||||
|
||||
function blobToDataUrl(blob: Blob): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result || ""));
|
||||
reader.onerror = () => reject(reader.error || new Error("资源读取失败"));
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
|
||||
async function assertMediaBlobIsUsable(blob: Blob, resultType: "image" | "video") {
|
||||
const mime = String(blob.type || "").toLowerCase();
|
||||
if (/^(?:application|text)\/(?:json|xml|html|plain)|\+xml/.test(mime)) {
|
||||
throw new Error("结果资源已过期或返回了错误内容，请重新生成。");
|
||||
}
|
||||
|
||||
const header = new Uint8Array(await blob.slice(0, 16).arrayBuffer());
|
||||
const asText = new TextDecoder("utf-8", { fatal: false }).decode(header);
|
||||
const isPng = header[0] === 0x89 && header[1] === 0x50 && header[2] === 0x4e && header[3] === 0x47;
|
||||
const isJpeg = header[0] === 0xff && header[1] === 0xd8 && header[2] === 0xff;
|
||||
const isGif = asText.startsWith("GIF8");
|
||||
const isWebp = asText.startsWith("RIFF") && asText.slice(8, 12) === "WEBP";
|
||||
const isMp4 = asText.slice(4, 8) === "ftyp";
|
||||
const looksLikeErrorDocument = asText.startsWith("<?xml") || asText.startsWith("<Error") || asText.startsWith("{\"") || asText.startsWith("<!DO");
|
||||
if (looksLikeErrorDocument) throw new Error("结果资源已过期或返回了错误内容，请重新生成。");
|
||||
|
||||
const hasExpectedMagic =
|
||||
resultType === "video"
|
||||
? isMp4 || mime.startsWith("video/")
|
||||
: isPng || isJpeg || isGif || isWebp || mime.startsWith("image/");
|
||||
if (!hasExpectedMagic) throw new Error("未收到有效的媒体文件。");
|
||||
}
|
||||
|
||||
async function downloadResultBlob(
|
||||
input: PersistWorkbenchResultAssetInput,
|
||||
client: WorkbenchResultPersistenceClient,
|
||||
): Promise<{ blob: Blob; contentType?: string; filename?: string }> {
|
||||
if (input.taskId) {
|
||||
try {
|
||||
const result = await client.downloadTaskResult(input.taskId);
|
||||
return {
|
||||
blob: result.blob,
|
||||
contentType: result.contentType || result.blob.type || undefined,
|
||||
filename: result.filename,
|
||||
};
|
||||
} catch {
|
||||
// Some older tasks may not support the proxy download route; fall back to the URL while it is still valid.
|
||||
}
|
||||
}
|
||||
|
||||
const fetchAsset = client.fetchAsset || ((url: string) => fetch(url, { credentials: "omit" }));
|
||||
const response = await fetchAsset(input.sourceUrl);
|
||||
if (!response.ok) throw new Error(`结果资源请求失败：${response.status}`);
|
||||
const blob = await response.blob();
|
||||
return {
|
||||
blob,
|
||||
contentType: blob.type || response.headers.get("content-type") || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export async function persistWorkbenchResultAsset(input: PersistWorkbenchResultAssetInput): Promise<PersistedWorkbenchResultAsset> {
|
||||
const fallbackResult = createFallbackResult(input);
|
||||
if (fallbackResult.ossKey) return fallbackResult;
|
||||
|
||||
const client = input.client || getDefaultClient();
|
||||
const mimeType = input.mimeType || (input.resultType === "video" ? "video/mp4" : "image/png");
|
||||
const name = buildWorkbenchResultAssetName(input.title, input.sourceUrl, input.resultType, mimeType);
|
||||
|
||||
// Try server-side URL-to-OSS first (no base64, no client download)
|
||||
try {
|
||||
const uploaded = await client.uploadAssetByUrl({
|
||||
sourceUrl: input.sourceUrl,
|
||||
name,
|
||||
mimeType,
|
||||
scope: "workbench-result",
|
||||
});
|
||||
return {
|
||||
url: uploaded.url,
|
||||
originalUrl: input.sourceUrl,
|
||||
ossKey: uploaded.ossKey,
|
||||
mimeType,
|
||||
};
|
||||
} catch (urlError) {
|
||||
console.warn("[workbench] URL upload failed, falling back to download+base64:", urlError instanceof Error ? urlError.message : urlError);
|
||||
}
|
||||
|
||||
// Fallback: download → base64 → upload
|
||||
try {
|
||||
const downloaded = await downloadResultBlob(input, client);
|
||||
if (!downloaded.blob.size) throw new Error("结果资源内容为空");
|
||||
await assertMediaBlobIsUsable(downloaded.blob, input.resultType);
|
||||
|
||||
const fallbackMime = downloaded.contentType || downloaded.blob.type || mimeType;
|
||||
const fallbackName = downloaded.filename || name;
|
||||
const dataUrl = await blobToDataUrl(downloaded.blob);
|
||||
const uploaded = await client.uploadAsset({
|
||||
dataUrl,
|
||||
name: fallbackName,
|
||||
mimeType: fallbackMime,
|
||||
scope: "workbench-result",
|
||||
});
|
||||
|
||||
return {
|
||||
url: uploaded.url,
|
||||
originalUrl: input.sourceUrl,
|
||||
ossKey: uploaded.ossKey,
|
||||
mimeType: fallbackMime,
|
||||
};
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : String(error || "");
|
||||
if (/413|too large/i.test(msg)) {
|
||||
console.warn("[workbench] OSS upload rejected (file too large), using temporary URL:", msg);
|
||||
} else {
|
||||
console.warn("[workbench] result persistence fallback:", error);
|
||||
}
|
||||
return fallbackResult;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import {
|
||||
userKey,
|
||||
MESSAGE_STORAGE_KEY,
|
||||
ACTIVE_CONVERSATION_STORAGE_KEY,
|
||||
PROMPT_HISTORY_STORAGE_KEY,
|
||||
TASK_KEEPALIVE_STORAGE_KEY,
|
||||
WORKBENCH_TASK_STALE_MS,
|
||||
type ChatMessage,
|
||||
type WorkbenchKeepaliveTask,
|
||||
} from "./workbenchConstants";
|
||||
import { parseWorkbenchTimestampValue } from "./workbenchConstants";
|
||||
|
||||
export function readStoredMessages(): ChatMessage[] {
|
||||
if (typeof window === "undefined") return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(MESSAGE_STORAGE_KEY));
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
return parsed.filter((item): item is ChatMessage => {
|
||||
if (!item || typeof item !== "object") return false;
|
||||
const candidate = item as Partial<ChatMessage>;
|
||||
return (
|
||||
typeof candidate.id === "string" &&
|
||||
(candidate.role === "user" || candidate.role === "assistant") &&
|
||||
typeof candidate.body === "string"
|
||||
);
|
||||
});
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function readStoredPromptHistory(): string[] {
|
||||
if (typeof window === "undefined") return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(PROMPT_HISTORY_STORAGE_KEY));
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function readStoredActiveConversationId(messages: ChatMessage[] = []): number | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
const value = raw ? Number(raw) : NaN;
|
||||
if (Number.isFinite(value) && value > 0) return value;
|
||||
} catch {
|
||||
// Active conversation recovery is optional.
|
||||
}
|
||||
for (let index = messages.length - 1; index >= 0; index -= 1) {
|
||||
const candidate = messages[index]?.conversationId;
|
||||
if (typeof candidate === "number" && Number.isFinite(candidate) && candidate > 0) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function persistActiveConversationId(conversationId: number | null) {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
if (conversationId && Number.isFinite(conversationId)) {
|
||||
window.localStorage.setItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY), String(conversationId));
|
||||
} else {
|
||||
window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
}
|
||||
} catch {
|
||||
// Local history is a convenience; generation still works without it.
|
||||
}
|
||||
}
|
||||
|
||||
export function persistMessages(messages: ChatMessage[]) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(MESSAGE_STORAGE_KEY), JSON.stringify(messages.slice(-60)));
|
||||
} catch {
|
||||
// Local history is a convenience; generation still works without it.
|
||||
}
|
||||
}
|
||||
|
||||
export function clearWorkbenchLocalState() {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
window.localStorage.removeItem(userKey(MESSAGE_STORAGE_KEY));
|
||||
window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
window.localStorage.removeItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
|
||||
} catch {
|
||||
// Logout cleanup should never block the UI.
|
||||
}
|
||||
}
|
||||
|
||||
export function persistPromptHistory(history: string[]) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(PROMPT_HISTORY_STORAGE_KEY), JSON.stringify(history.slice(0, 20)));
|
||||
} catch {
|
||||
// Local history is optional.
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Keepalive task persistence ──────────────────────────────────────
|
||||
|
||||
export function buildRecoverableTaskFromMessage(conversationId: number, message: ChatMessage): WorkbenchKeepaliveTask | null {
|
||||
if (message.role !== "assistant") return null;
|
||||
if (!(message.status === "thinking" && message.taskId && message.mode !== "chat")) return null;
|
||||
if (message.mode !== "image" && message.mode !== "video") return null;
|
||||
if (Date.now() - parseWorkbenchTimestampValue(message.createdAt) > WORKBENCH_TASK_STALE_MS) return null;
|
||||
|
||||
const specs = message.result?.specs || [];
|
||||
return {
|
||||
taskId: message.taskId,
|
||||
conversationId,
|
||||
assistantMessageId: message.id,
|
||||
operation: message.taskStatusLabel?.includes("超分") ? "video-super-resolution" : "generation",
|
||||
mode: message.mode,
|
||||
modelLabel: specs[0] || message.author || message.mode,
|
||||
specs,
|
||||
referenceCount: message.attachments?.length || 0,
|
||||
progress: Math.max(10, Math.min(99, Number(message.taskProgress || 30))),
|
||||
statusLabel: message.taskStatusLabel || "任务恢复中...",
|
||||
startedAt: parseWorkbenchTimestampValue(message.createdAt) || Date.now(),
|
||||
};
|
||||
}
|
||||
|
||||
export function readStoredKeepaliveTasks(): Record<string, WorkbenchKeepaliveTask> {
|
||||
if (typeof window === "undefined") return {};
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
|
||||
if (!raw) return {};
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
|
||||
|
||||
const tasks: Record<string, WorkbenchKeepaliveTask> = {};
|
||||
Object.values(parsed as Record<string, Partial<WorkbenchKeepaliveTask>>).forEach((task) => {
|
||||
if (
|
||||
task &&
|
||||
typeof task.taskId === "string" &&
|
||||
typeof task.conversationId === "number" &&
|
||||
typeof task.assistantMessageId === "string" &&
|
||||
(task.mode === "image" || task.mode === "video")
|
||||
) {
|
||||
tasks[task.taskId] = {
|
||||
taskId: task.taskId,
|
||||
conversationId: task.conversationId,
|
||||
assistantMessageId: task.assistantMessageId,
|
||||
concurrencySlotId: typeof task.concurrencySlotId === "string" ? task.concurrencySlotId : undefined,
|
||||
operation: task.operation === "video-super-resolution" ? "video-super-resolution" : "generation",
|
||||
mode: task.mode,
|
||||
modelLabel: task.modelLabel || task.mode,
|
||||
specs: Array.isArray(task.specs) ? task.specs.filter((item): item is string => typeof item === "string") : [],
|
||||
referenceCount: Number(task.referenceCount || 0),
|
||||
progress: Number(task.progress || 0),
|
||||
statusLabel: task.statusLabel || "Generating...",
|
||||
startedAt: Number(task.startedAt || Date.now()),
|
||||
};
|
||||
}
|
||||
});
|
||||
return tasks;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function persistKeepaliveTasks(tasks: Record<string, WorkbenchKeepaliveTask>) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(TASK_KEEPALIVE_STORAGE_KEY), JSON.stringify(tasks));
|
||||
} catch {
|
||||
// Task restore is best-effort.
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user