willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,357 @@
+import {
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+  type FormEvent,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  CheckCircledIcon,
+  ChatBubbleIcon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+} from "@radix-ui/react-icons";
+import { isPromiseLike } from "aidly";
+import classNames from "classnames";
+
+import { FormMessage } from "@willa-ui/form/components/FormMessage";
+import { TextArea } from "@willa-ui/form/components/TextArea";
+import {
+  Segmented,
+  type SegmentedOption,
+} from "@willa-ui/content/components/Segmented";
+import { Button } from "@willa-ui/content/components/Button";
+
+export type FeedbackValue = "up" | "down" | "report";
+
+export type FeedbackBarState = {
+  value: FeedbackValue;
+  reason?: string;
+  note?: string;
+};
+
+export type FeedbackBarPayload = {
+  targetId: string;
+  value: FeedbackValue;
+  reason?: string;
+  note?: string;
+};
+
+export type FeedbackBarProps = {
+  targetId: string;
+  state?: FeedbackBarState;
+  disabled?: boolean;
+  disabledMessage?: ReactNode;
+  reportReasons?: Array<string>;
+  onSubmit: (payload: FeedbackBarPayload) => Promise<void> | void;
+  onUndo?: () => void;
+  onReport?: (id: string) => void;
+} & Omit<ComponentPropsWithoutRef<"section">, "children" | "onSubmit">;
+
+const defaultReportReasons = ["内容不准确", "目标不清晰", "语气不合适", "其他"];
+
+export function FeedbackBar(props: FeedbackBarProps) {
+  const {
+    targetId,
+    state,
+    disabled = false,
+    disabledMessage = "当前反馈入口已禁用",
+    reportReasons = defaultReportReasons,
+    onSubmit,
+    onUndo,
+    onReport,
+    className,
+    style,
+    ...sectionProps
+  } = props;
+
+  const isControlled = state !== undefined;
+  const [draftValue, setDraftValue] = useState<FeedbackValue | null>(
+    state?.value ?? null,
+  );
+  const [draftReason, setDraftReason] = useState(state?.reason ?? "");
+  const [draftNote, setDraftNote] = useState(state?.note ?? "");
+  const [submitting, setSubmitting] = useState(false);
+  const [committedPayload, setCommittedPayload] =
+    useState<FeedbackBarState | null>(null);
+  const [submitError, setSubmitError] = useState<ReactNode>(null);
+
+  const reportReasonOptions: Array<SegmentedOption> = useMemo(
+    () =>
+      reportReasons.map((reason) => ({
+        value: reason,
+        label: reason,
+      })),
+    [reportReasons],
+  );
+
+  const feedbackOptions: Array<SegmentedOption> = useMemo(
+    () => [
+      { value: "up", label: "有帮助" },
+      { value: "down", label: "不准确" },
+      { value: "report", label: "举报" },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    setDraftValue(state?.value ?? null);
+    setDraftReason(state?.reason ?? "");
+    setDraftNote(state?.note ?? "");
+    setCommittedPayload(state ? { ...state } : null);
+    setSubmitError(null);
+  }, [state?.value, state?.reason, state?.note, state]);
+
+  const committedPayloadValue = state ?? committedPayload;
+
+  const isEqualFeedback = (
+    left: FeedbackBarState | null,
+    right: FeedbackBarState,
+  ) => {
+    if (left === null) {
+      return false;
+    }
+
+    return (
+      left.value === right.value &&
+      (left.reason ?? "") === (right.reason ?? "") &&
+      (left.note ?? "") === (right.note ?? "")
+    );
+  };
+
+  const hasCommitted = Boolean(committedPayloadValue);
+  const isDraftPending = committedPayloadValue
+    ? !isEqualFeedback(committedPayloadValue, {
+        value: draftValue ?? committedPayloadValue.value,
+        reason: draftReason,
+        note: draftNote,
+      })
+    : Boolean(draftValue);
+
+  const needReason = draftValue === "down" || draftValue === "report";
+  const canSubmitReason =
+    !needReason ||
+    Boolean(draftReason) ||
+    (draftReason === "" && draftValue !== "down" && draftValue !== "report");
+  const submitDisabled =
+    !draftValue ||
+    !canSubmitReason ||
+    (needReason && reportReasons.length > 0 && !draftReason) ||
+    disabled ||
+    submitting;
+  const showStatePanel = hasCommitted && !isDraftPending;
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (submitDisabled || draftValue === null) {
+      return;
+    }
+
+    const nextPayload: FeedbackBarPayload = {
+      targetId,
+      value: draftValue,
+      reason: draftReason || undefined,
+      note: draftNote.trim() || undefined,
+    };
+
+    setSubmitError(null);
+    setSubmitting(true);
+
+    const finalizeSubmit = () => {
+      setSubmitting(false);
+      setCommittedPayload({
+        value: nextPayload.value,
+        reason: nextPayload.reason,
+        note: nextPayload.note,
+      });
+      if (nextPayload.value === "report") {
+        onReport?.(targetId);
+      }
+    };
+
+    let result: ReturnType<FeedbackBarProps["onSubmit"]>;
+    try {
+      result = onSubmit(nextPayload);
+    } catch {
+      setSubmitError("提交失败，请稍后重试");
+      setSubmitting(false);
+      return;
+    }
+
+    if (isPromiseLike(result)) {
+      result
+        .then(() => {
+          finalizeSubmit();
+        })
+        .catch(() => {
+          setSubmitError("提交失败，请稍后重试");
+          setSubmitting(false);
+        });
+
+      return;
+    }
+
+    finalizeSubmit();
+  };
+
+  const handleReset = () => {
+    if (isControlled) {
+      setDraftValue(state?.value ?? null);
+      setDraftReason(state?.reason ?? "");
+      setDraftNote(state?.note ?? "");
+    } else {
+      setDraftValue(committedPayloadValue ? committedPayloadValue.value : null);
+      setDraftReason(
+        committedPayloadValue ? (committedPayloadValue.reason ?? "") : "",
+      );
+      setDraftNote(
+        committedPayloadValue ? (committedPayloadValue.note ?? "") : "",
+      );
+    }
+
+    onUndo?.();
+  };
+
+  const handleValueChange = (value: string) => {
+    const normalized = value as FeedbackBarValue;
+    setDraftValue(normalized);
+    if (normalized === "up") {
+      setDraftReason("");
+    }
+  };
+
+  const handleReasonChange = (value: string) => {
+    setDraftReason(value);
+  };
+
+  const handleNoteChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setDraftNote(event.currentTarget.value);
+  };
+
+  const stateSummary =
+    committedPayloadValue?.value === "up"
+      ? "已标记为「有帮助」"
+      : committedPayloadValue?.value === "down"
+        ? `已标记为「不准确」${
+            committedPayloadValue?.reason
+              ? `（${committedPayloadValue.reason}）`
+              : ""
+          }`
+        : committedPayloadValue?.value === "report"
+          ? `举报已提交${
+              committedPayloadValue?.reason
+                ? `（${committedPayloadValue.reason}）`
+                : ""
+            }`
+          : null;
+
+  const stateMeta = committedPayloadValue?.note
+    ? `补充说明：${committedPayloadValue.note}`
+    : null;
+
+  return (
+    <section
+      {...sectionProps}
+      className={classNames(
+        "willa-feedback-bar",
+        disabled && "willa-feedback-bar--disabled",
+        className,
+      )}
+      style={style}
+    >
+      <div className="willa-feedback-bar__title">回答反馈</div>
+      <Segmented
+        size="sm"
+        options={feedbackOptions}
+        value={draftValue ?? ""}
+        onValueChange={handleValueChange}
+        disabled={disabled || submitting}
+      />
+
+      {needReason ? (
+        <div className="willa-feedback-bar__reasons">
+          <span className="willa-feedback-bar__reason-label">
+            请选择反馈原因
+          </span>
+          <Segmented
+            size="sm"
+            selectionMode="single"
+            options={reportReasonOptions}
+            value={draftReason}
+            onValueChange={handleReasonChange}
+            disabled={disabled || submitting}
+          />
+        </div>
+      ) : null}
+
+      <form className="willa-feedback-bar__note" onSubmit={handleSubmit}>
+        <TextArea
+          size="sm"
+          resize="vertical"
+          rows={3}
+          value={draftNote}
+          disabled={disabled || submitting || !draftValue}
+          placeholder={
+            draftValue === "report" ? "补充举报说明（可选）" : "可选补充说明"
+          }
+          onChange={handleNoteChange}
+        />
+        <div className="willa-feedback-bar__actions">
+          <Button
+            size="sm"
+            type="submit"
+            disabled={submitDisabled}
+            loading={submitting}
+            loadingText="提交中"
+          >
+            提交反馈
+          </Button>
+          {showStatePanel ? (
+            <Button
+              size="sm"
+              variant="soft"
+              type="button"
+              onClick={handleReset}
+            >
+              撤回
+            </Button>
+          ) : null}
+        </div>
+      </form>
+
+      {submitError ? (
+        <FormMessage tone="error" icon={<CrossCircledIcon />}>
+          {submitError}
+        </FormMessage>
+      ) : null}
+
+      {disabled ? (
+        <FormMessage tone="warning" icon={<ExclamationTriangleIcon />}>
+          {disabledMessage}
+        </FormMessage>
+      ) : null}
+
+      {showStatePanel ? (
+        <div className="willa-feedback-bar__state">
+          <FormMessage tone="success" icon={<CheckCircledIcon />}>
+            {stateSummary}
+          </FormMessage>
+          {stateMeta ? (
+            <FormMessage tone="info">{stateMeta}</FormMessage>
+          ) : null}
+        </div>
+      ) : null}
+
+      {committedPayloadValue?.value === "report" ? (
+        <FormMessage icon={<ChatBubbleIcon />}>举报记录已关联处理</FormMessage>
+      ) : null}
+    </section>
+  );
+}
+
+FeedbackBar.displayName = "FeedbackBar";
+
+type FeedbackBarValue = FeedbackValue;

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

@@ -0,0 +1,275 @@
+.willa-generation-card {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 0.9rem;
+  border: 1px solid var(--willa-generation-card-border);
+  border-radius: 1rem;
+  background: var(--willa-generation-card-bg);
+  box-shadow: var(--willa-generation-card-shadow);
+  color: var(--willa-generation-card-text);
+  font-family: var(--willa-body-font);
+  padding: 1rem;
+}
+
+.willa-generation-card--collapsible {
+  width: min(100%, 36rem);
+  max-width: 100%;
+}
+
+.willa-generation-card-header {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: flex-start;
+  gap: 0.84rem;
+}
+
+.willa-generation-card-mark {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 2.18rem;
+  height: 2.18rem;
+  place-items: center;
+  border: 1px solid var(--willa-generation-card-mark-border);
+  border-radius: 0.68rem;
+  background: var(--willa-generation-card-mark-bg);
+  color: var(--willa-generation-card-accent);
+}
+
+.willa-generation-card-mark svg {
+  width: 1.08rem;
+  height: 1.08rem;
+}
+
+.willa-generation-card--generating .willa-generation-card-mark svg {
+  animation: willa-generation-card-pulse 1.2s ease-in-out infinite;
+}
+
+.willa-generation-card-heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.34rem;
+}
+
+.willa-generation-card-title-row {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.48rem;
+}
+
+.willa-generation-card-title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--willa-generation-card-title);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-generation-card-status {
+  display: inline-flex;
+  min-height: 1.36rem;
+  align-items: center;
+  border: 1px solid var(--willa-generation-card-status-border);
+  border-radius: 0.48rem;
+  background: var(--willa-generation-card-status-bg);
+  color: var(--willa-generation-card-accent);
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1;
+  padding: 0 0.48rem;
+  white-space: nowrap;
+}
+
+.willa-generation-card-description {
+  color: var(--willa-generation-card-muted);
+  font-size: 0.82rem;
+  line-height: 1.58;
+}
+
+.willa-generation-card-meta {
+  color: var(--willa-generation-card-muted);
+  font-size: 0.76rem;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.willa-generation-card-toggle {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.32rem;
+  border: 1px solid var(--willa-generation-card-status-border);
+  border-radius: 0.52rem;
+  background: var(--willa-generation-card-status-bg);
+  color: var(--willa-generation-card-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.74rem;
+  line-height: 1.2;
+  padding: 0.28rem 0.42rem 0.28rem 0.5rem;
+  transition:
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-generation-card-toggle:hover {
+  border-color: var(--willa-generation-card-toggle-border-hover);
+  color: var(--willa-generation-card-title);
+}
+
+.willa-generation-card-toggle:focus-visible {
+  box-shadow: 0 0 0 3px var(--willa-generation-card-ring);
+  outline: none;
+}
+
+.willa-generation-card-toggle-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-generation-card-toggle-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex: none;
+  transition: transform 150ms ease;
+}
+
+.willa-generation-card--collapsed .willa-generation-card-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.willa-generation-card-content {
+  min-width: 0;
+  border: 1px solid var(--willa-generation-card-content-border);
+  border-radius: 0.72rem;
+  background: var(--willa-generation-card-content-bg);
+  color: var(--willa-generation-card-content-text);
+  font-size: 0.86rem;
+  line-height: 1.65;
+  padding: 0.76rem 0.84rem;
+}
+
+.willa-generation-card-content > :first-child {
+  margin-block-start: 0;
+}
+
+.willa-generation-card-content > :last-child {
+  margin-block-end: 0;
+}
+
+.willa-generation-card-footer {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.72rem;
+}
+
+.willa-generation-card-metrics {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 0.44rem;
+  margin: 0;
+}
+
+.willa-generation-card-metric {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.34rem;
+  border: 1px solid var(--willa-generation-card-metric-border);
+  border-radius: 0.54rem;
+  background: var(--willa-generation-card-metric-bg);
+  padding: 0.32rem 0.48rem;
+}
+
+.willa-generation-card-metric dt {
+  color: var(--willa-generation-card-muted);
+  font-size: 0.72rem;
+  line-height: 1.2;
+}
+
+.willa-generation-card-metric dd {
+  margin: 0;
+  color: var(--willa-generation-card-title);
+  font-size: 0.78rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.willa-generation-card-actions {
+  display: flex;
+  min-width: 0;
+  flex: none;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+  justify-content: flex-end;
+}
+
+.willa-generation-card--pending {
+  --willa-generation-card-accent: var(--willa-generation-card-pending);
+}
+
+.willa-generation-card--generating {
+  --willa-generation-card-accent: var(--willa-generation-card-generating);
+}
+
+.willa-generation-card--completed {
+  --willa-generation-card-accent: var(--willa-generation-card-completed);
+}
+
+.willa-generation-card--failed {
+  --willa-generation-card-accent: var(--willa-generation-card-failed);
+}
+
+@keyframes willa-generation-card-pulse {
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-generation-card {
+    gap: 0.72rem;
+    border-radius: 0.9rem;
+    padding: 0.76rem;
+  }
+
+  .willa-generation-card-header {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .willa-generation-card-meta {
+    grid-column: 2;
+    white-space: normal;
+  }
+
+  .willa-generation-card-title {
+    white-space: normal;
+  }
+
+  .willa-generation-card-footer {
+    align-items: stretch;
+  }
+
+  .willa-generation-card-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}