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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user