refactor(workbench): extract types, constants, utils, sub-components from WorkbenchPage
WorkbenchPage.tsx: 4146 → 3047 lines (-27%) Extracted to 6 sibling modules: - workbenchConstants.ts (403L): types, MODE_META, option arrays, shared helpers - workbenchStorage.ts (172L): localStorage read/write/persist functions - workbenchReferenceUtils.ts (210L): image compression, fingerprint, file helpers - workbenchMentionUtils.tsx (79L): prompt mention parsing and token rendering - WorkbenchPromptPreview.tsx (87L): ReferencePreview, PromptPreviewLayer components - WorkbenchSelectChips.tsx (263L): SelectChip, CompoundSelectChip, InlineOptionChip All extracted code is imported back via ES module imports — no logic changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
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,404 @@
|
|||||||
|
import { isServerRequestError } from "../../api/serverConnection";
|
||||||
|
import { ENTERPRISE_VIDEO_MODEL_OPTIONS } from "../../utils/enterpriseVideoPolicy";
|
||||||
|
import type { WebGenerationPreviewTask } from "../../types";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export type WorkbenchMode = "chat" | "image" | "video";
|
||||||
|
export type ToolbarMenuId =
|
||||||
|
| "studio-mode"
|
||||||
|
| "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";
|
||||||
|
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_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 4K · 0.20 积分" },
|
||||||
|
{ value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
|
||||||
|
{ value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
|
||||||
|
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
|
||||||
|
{ value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
|
||||||
|
{ value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
|
||||||
|
{ value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
|
||||||
|
];
|
||||||
|
|
||||||
|
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 VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
|
||||||
|
{ value: "omni", label: "全能参考" },
|
||||||
|
{ value: "start-end", label: "首尾帧" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
|
||||||
|
{ value: "4", label: "4s" },
|
||||||
|
{ 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" ||
|
||||||
|
typeof patch.taskId === "string" ||
|
||||||
|
typeof patch.resultUrl === "string" ||
|
||||||
|
typeof patch.resultOssKey === "string" ||
|
||||||
|
typeof patch.resultOriginalUrl === "string" ||
|
||||||
|
typeof patch.resultMimeType === "string"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,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,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