willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-ai/src/components/GenerationCard/index.tsx

@@ -0,0 +1,156 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  LightningBoltIcon,
+  MagicWandIcon,
+} from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import { CardToggle, useCardCollapse } from "#ai/internal/cardCollapse";
+
+export type GenerationCardStatus =
+  | "pending"
+  | "generating"
+  | "completed"
+  | "failed";
+
+export type GenerationCardMetric = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+export type GenerationCardProps = {
+  title: ReactNode;
+  status?: GenerationCardStatus;
+  description?: ReactNode;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  metrics?: Array<GenerationCardMetric>;
+  actions?: ReactNode;
+  children?: ReactNode;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  summary?: ReactNode;
+  onCollapsedChange?: (collapsed: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<"section">, "children" | "title">;
+
+export function GenerationCard({
+  title,
+  status = "pending",
+  description,
+  meta,
+  icon,
+  metrics,
+  actions,
+  children,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  summary,
+  onCollapsedChange,
+  className,
+  ...props
+}: GenerationCardProps) {
+  const hasMetrics = metrics !== undefined && metrics.length > 0;
+  const { canCollapse, isCollapsed, resolvedSummary, toggleCollapsed } =
+    useCardCollapse({
+      collapsible,
+      collapsed,
+      defaultCollapsed,
+      hasContent: Boolean(children),
+      summary,
+      defaultSummary: "查看生成结果",
+      onCollapsedChange,
+    });
+
+  return (
+    <section
+      {...props}
+      className={classNames(
+        "willa-generation-card",
+        `willa-generation-card--${status}`,
+        canCollapse && "willa-generation-card--collapsible",
+        isCollapsed && "willa-generation-card--collapsed",
+        className,
+      )}
+      data-status={status}
+    >
+      <div className="willa-generation-card-header">
+        <span className="willa-generation-card-mark" aria-hidden="true">
+          {icon ?? <GenerationStatusIcon status={status} />}
+        </span>
+        <div className="willa-generation-card-heading">
+          <div className="willa-generation-card-title-row">
+            <h3 className="willa-generation-card-title">{title}</h3>
+            <span className="willa-generation-card-status">
+              {generationStatusLabelMap[status]}
+            </span>
+          </div>
+          {description ? (
+            <div className="willa-generation-card-description">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        {meta ? <div className="willa-generation-card-meta">{meta}</div> : null}
+      </div>
+
+      {canCollapse ? (
+        <CardToggle
+          className="willa-generation-card-toggle"
+          textClassName="willa-generation-card-toggle-text"
+          iconClassName="willa-generation-card-toggle-icon"
+          summary={resolvedSummary}
+          expanded={!isCollapsed}
+          onClick={toggleCollapsed}
+        />
+      ) : null}
+
+      {children && !isCollapsed ? (
+        <div className="willa-generation-card-content">{children}</div>
+      ) : null}
+
+      {hasMetrics || actions ? (
+        <div className="willa-generation-card-footer">
+          {hasMetrics ? (
+            <dl className="willa-generation-card-metrics">
+              {metrics.map((metric, index) => (
+                <div className="willa-generation-card-metric" key={index}>
+                  <dt>{metric.label}</dt>
+                  <dd>{metric.value}</dd>
+                </div>
+              ))}
+            </dl>
+          ) : null}
+          {actions ? (
+            <div className="willa-generation-card-actions">{actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+const GenerationStatusIcon = ({ status }: { status: GenerationCardStatus }) => {
+  if (status === "completed") {
+    return <CheckCircledIcon />;
+  }
+  if (status === "failed") {
+    return <CrossCircledIcon />;
+  }
+  if (status === "generating") {
+    return <LightningBoltIcon />;
+  }
+  return <MagicWandIcon />;
+};
+
+const generationStatusLabelMap: Record<GenerationCardStatus, string> = {
+  pending: "等待生成",
+  generating: "生成中",
+  completed: "已生成",
+  failed: "生成失败",
+};
+
+GenerationCard.displayName = "GenerationCard";

package/packages/willa-ai/src/components/HumanApprovalCard/index.css

@@ -0,0 +1,205 @@
+.willa-human-approval-card {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 0.82rem;
+  border: 1px solid var(--willa-human-approval-card-border);
+  border-radius: 1rem;
+  background: var(--willa-human-approval-card-bg);
+  box-shadow: var(--willa-human-approval-card-shadow);
+  color: var(--willa-human-approval-card-text);
+  font-family: var(--willa-body-font);
+  padding: 1rem;
+}
+
+.willa-human-approval-card__header {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: flex-start;
+  gap: 0.82rem;
+}
+
+.willa-human-approval-card__mark {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 2.18rem;
+  height: 2.18rem;
+  place-items: center;
+  border: 1px solid var(--willa-human-approval-card-mark-border);
+  border-radius: 0.68rem;
+  background: var(--willa-human-approval-card-mark-bg);
+  color: var(--willa-human-approval-card-accent);
+}
+
+.willa-human-approval-card__mark svg {
+  width: 1.08rem;
+  height: 1.08rem;
+}
+
+.willa-human-approval-card__heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.34rem;
+}
+
+.willa-human-approval-card__title-row {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.willa-human-approval-card__title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--willa-human-approval-card-title);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-human-approval-card__status {
+  flex: none;
+}
+
+.willa-human-approval-card__description {
+  color: var(--willa-human-approval-card-muted);
+  font-size: 0.82rem;
+  line-height: 1.58;
+}
+
+.willa-human-approval-card__meta {
+  color: var(--willa-human-approval-card-muted);
+  font-size: 0.76rem;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.willa-human-approval-card__details {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.44rem;
+  margin: 0;
+}
+
+.willa-human-approval-card__detail {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.36rem;
+  border: 1px solid var(--willa-human-approval-card-detail-border);
+  border-radius: 0.56rem;
+  background: var(--willa-human-approval-card-detail-bg);
+  padding: 0.34rem 0.5rem;
+}
+
+.willa-human-approval-card__detail dt {
+  color: var(--willa-human-approval-card-muted);
+  font-size: 0.72rem;
+  line-height: 1.2;
+}
+
+.willa-human-approval-card__detail dd {
+  margin: 0;
+  color: var(--willa-human-approval-card-title);
+  font-size: 0.78rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.willa-human-approval-card__content {
+  min-width: 0;
+  border: 1px solid var(--willa-human-approval-card-content-border);
+  border-radius: 0.72rem;
+  background: var(--willa-human-approval-card-content-bg);
+  color: var(--willa-human-approval-card-content-text);
+  font-size: 0.86rem;
+  line-height: 1.65;
+  padding: 0.76rem 0.84rem;
+}
+
+.willa-human-approval-card__content > :first-child {
+  margin-block-start: 0;
+}
+
+.willa-human-approval-card__content > :last-child {
+  margin-block-end: 0;
+}
+
+.willa-human-approval-card__actions {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.48rem;
+  justify-content: flex-end;
+}
+
+.willa-human-approval-card--neutral {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-neutral);
+}
+
+.willa-human-approval-card--warning {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-warning);
+}
+
+.willa-human-approval-card--danger {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-danger);
+}
+
+.willa-human-approval-card--approved {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-success);
+}
+
+.willa-human-approval-card--rejected {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-danger);
+}
+
+.willa-human-approval-card--expired {
+  --willa-human-approval-card-accent: var(--willa-human-approval-card-muted);
+}
+
+@media (max-width: 767px) {
+  .willa-human-approval-card {
+    gap: 0.72rem;
+    border-radius: 0.9rem;
+    padding: 0.76rem;
+  }
+
+  .willa-human-approval-card__header {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .willa-human-approval-card__meta {
+    grid-column: 2;
+    white-space: normal;
+  }
+
+  .willa-human-approval-card__title {
+    white-space: normal;
+  }
+
+  .willa-human-approval-card__details {
+    display: grid;
+  }
+
+  .willa-human-approval-card__detail {
+    justify-content: space-between;
+  }
+
+  .willa-human-approval-card__actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .willa-human-approval-card__actions .willa-button {
+    width: 100%;
+  }
+}

package/packages/willa-ai/src/components/HumanApprovalCard/index.tsx

@@ -0,0 +1,262 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  type ReactNode,
+  useState,
+} from "react";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+  LockClosedIcon,
+  StopwatchIcon,
+} from "@radix-ui/react-icons";
+import { isPromiseLike } from "aidly";
+import classNames from "classnames";
+
+import { Badge } from "@willa-ui/content/components/Badge";
+import { Button } from "@willa-ui/content/components/Button";
+
+export type HumanApprovalCardStatus =
+  | "pending"
+  | "approved"
+  | "rejected"
+  | "expired";
+
+export type HumanApprovalCardTone = "neutral" | "warning" | "danger";
+
+export type HumanApprovalCardAction = "approve" | "reject";
+
+export type HumanApprovalCardDetail = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+export type HumanApprovalCardProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  status?: HumanApprovalCardStatus;
+  tone?: HumanApprovalCardTone;
+  icon?: ReactNode;
+  meta?: ReactNode;
+  details?: Array<HumanApprovalCardDetail>;
+  approveText?: ReactNode;
+  rejectText?: ReactNode;
+  approveDisabled?: boolean;
+  rejectDisabled?: boolean;
+  approveLoading?: boolean;
+  rejectLoading?: boolean;
+  children?: ReactNode;
+  onApprove?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  onReject?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  onActionError?: (
+    error: unknown,
+    action: HumanApprovalCardAction,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => void;
+} & Omit<ComponentPropsWithoutRef<"section">, "children" | "title">;
+
+type PendingAction = HumanApprovalCardAction;
+
+export function HumanApprovalCard({
+  title,
+  description,
+  status = "pending",
+  tone = "neutral",
+  icon,
+  meta,
+  details,
+  approveText = "确认继续",
+  rejectText = "拒绝",
+  approveDisabled = false,
+  rejectDisabled = false,
+  approveLoading = false,
+  rejectLoading = false,
+  children,
+  onApprove,
+  onReject,
+  onActionError,
+  className,
+  ...props
+}: HumanApprovalCardProps) {
+  const [pendingAction, setPendingAction] = useState<PendingAction | null>(
+    null,
+  );
+  const hasDetails = details !== undefined && details.length > 0;
+  const isPending = status === "pending";
+  const isApproving = approveLoading || pendingAction === "approve";
+  const isRejecting = rejectLoading || pendingAction === "reject";
+  const approveButtonDisabled =
+    approveDisabled || isRejecting || (!onApprove && !approveLoading);
+  const rejectButtonDisabled =
+    rejectDisabled || isApproving || (!onReject && !rejectLoading);
+
+  const handleAction = (
+    action: PendingAction,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => {
+    const handler = action === "approve" ? onApprove : onReject;
+
+    if (!handler) {
+      return;
+    }
+
+    let result: void | Promise<void>;
+    try {
+      result = handler(event);
+    } catch (error) {
+      setPendingAction(null);
+      onActionError?.(error, action, event);
+      throw error;
+    }
+
+    if (!isPromiseLike(result)) {
+      return;
+    }
+
+    setPendingAction(action);
+    return result.then(
+      () => {
+        setPendingAction(null);
+      },
+      (error) => {
+        setPendingAction(null);
+        onActionError?.(error, action, event);
+        return Promise.reject(error);
+      },
+    );
+  };
+
+  return (
+    <section
+      {...props}
+      className={classNames(
+        "willa-human-approval-card",
+        `willa-human-approval-card--${status}`,
+        `willa-human-approval-card--${tone}`,
+        className,
+      )}
+      data-status={status}
+      data-tone={tone}
+    >
+      <div className="willa-human-approval-card__header">
+        <span className="willa-human-approval-card__mark" aria-hidden="true">
+          {icon ?? <HumanApprovalCardIcon status={status} tone={tone} />}
+        </span>
+        <div className="willa-human-approval-card__heading">
+          <div className="willa-human-approval-card__title-row">
+            <h3 className="willa-human-approval-card__title">{title}</h3>
+            <Badge
+              className="willa-human-approval-card__status"
+              size="sm"
+              tone={humanApprovalCardStatusToneMap[status]}
+              variant="soft"
+            >
+              {humanApprovalCardStatusLabelMap[status]}
+            </Badge>
+          </div>
+          {description ? (
+            <div className="willa-human-approval-card__description">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        {meta ? (
+          <div className="willa-human-approval-card__meta">{meta}</div>
+        ) : null}
+      </div>
+
+      {hasDetails ? (
+        <dl className="willa-human-approval-card__details">
+          {details.map((detail, index) => (
+            <div className="willa-human-approval-card__detail" key={index}>
+              <dt>{detail.label}</dt>
+              <dd>{detail.value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+
+      {children ? (
+        <div className="willa-human-approval-card__content">{children}</div>
+      ) : null}
+
+      {isPending && (onApprove || onReject) ? (
+        <div className="willa-human-approval-card__actions">
+          {onReject ? (
+            <Button
+              disabled={rejectButtonDisabled}
+              loading={isRejecting}
+              size="sm"
+              variant="soft"
+              onClick={(event) => {
+                return handleAction("reject", event);
+              }}
+            >
+              {rejectText}
+            </Button>
+          ) : null}
+          {onApprove ? (
+            <Button
+              disabled={approveButtonDisabled}
+              loading={isApproving}
+              size="sm"
+              variant="solid"
+              onClick={(event) => {
+                return handleAction("approve", event);
+              }}
+            >
+              {approveText}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+const HumanApprovalCardIcon = ({
+  status,
+  tone,
+}: {
+  status: HumanApprovalCardStatus;
+  tone: HumanApprovalCardTone;
+}) => {
+  if (status === "approved") {
+    return <CheckCircledIcon />;
+  }
+
+  if (status === "rejected") {
+    return <CrossCircledIcon />;
+  }
+
+  if (status === "expired") {
+    return <StopwatchIcon />;
+  }
+
+  if (tone === "danger" || tone === "warning") {
+    return <ExclamationTriangleIcon />;
+  }
+
+  return <LockClosedIcon />;
+};
+
+const humanApprovalCardStatusLabelMap: Record<HumanApprovalCardStatus, string> =
+  {
+    pending: "等待确认",
+    approved: "已通过",
+    rejected: "已拒绝",
+    expired: "已过期",
+  };
+
+const humanApprovalCardStatusToneMap: Record<
+  HumanApprovalCardStatus,
+  "neutral" | "info" | "success" | "warning" | "danger"
+> = {
+  pending: "warning",
+  approved: "success",
+  rejected: "danger",
+  expired: "neutral",
+};
+
+HumanApprovalCard.displayName = "HumanApprovalCard";