willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,190 @@
+.willa-reasoning-steps {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 0.58rem;
+  color: var(--willa-reasoning-steps-text);
+  font-family: var(--willa-body-font);
+
+  --willa-timeline-card-bg: var(--willa-reasoning-steps-card-bg);
+  --willa-timeline-card-bg-hover: var(--willa-reasoning-steps-card-bg-hover);
+  --willa-timeline-card-border: var(--willa-reasoning-steps-card-border);
+  --willa-timeline-card-border-hover: var(
+    --willa-reasoning-steps-card-border-hover
+  );
+  --willa-timeline-focus-border: var(--willa-reasoning-steps-focus-border);
+  --willa-timeline-focus-ring: var(--willa-reasoning-steps-focus-ring);
+  --willa-timeline-line: var(--willa-reasoning-steps-line);
+  --willa-timeline-marker-bg: var(--willa-reasoning-steps-marker-bg);
+  --willa-timeline-marker-border: var(--willa-reasoning-steps-marker-border);
+  --willa-timeline-marker-text: var(--willa-reasoning-steps-marker);
+  --willa-timeline-title: var(--willa-reasoning-steps-title);
+  --willa-timeline-text: var(--willa-reasoning-steps-text);
+  --willa-timeline-muted: var(--willa-reasoning-steps-muted);
+  --willa-timeline-info-bg: var(--willa-reasoning-steps-active-bg);
+  --willa-timeline-info-border: var(--willa-reasoning-steps-active-border);
+  --willa-timeline-info-text: var(--willa-reasoning-steps-active);
+  --willa-timeline-success-bg: var(--willa-reasoning-steps-done-bg);
+  --willa-timeline-success-border: var(--willa-reasoning-steps-done-border);
+  --willa-timeline-success-text: var(--willa-reasoning-steps-done);
+  --willa-timeline-danger-bg: var(--willa-reasoning-steps-error-bg);
+  --willa-timeline-danger-border: var(--willa-reasoning-steps-error-border);
+  --willa-timeline-danger-text: var(--willa-reasoning-steps-error);
+}
+
+.willa-reasoning-steps--collapsible {
+  width: min(100%, 36rem);
+  max-width: 100%;
+}
+
+.willa-reasoning-steps-toggle {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.62rem;
+  padding: 0.72rem 0.82rem;
+  border: 1px solid var(--willa-reasoning-steps-card-border);
+  border-radius: 0.9rem;
+  background: var(--willa-reasoning-steps-card-bg);
+  color: var(--willa-reasoning-steps-text);
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-reasoning-steps-toggle:hover {
+  border-color: var(--willa-reasoning-steps-card-border-hover);
+  background: var(--willa-reasoning-steps-card-bg-hover);
+}
+
+.willa-reasoning-steps-toggle:focus-visible {
+  border-color: var(--willa-reasoning-steps-focus-border);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--willa-reasoning-steps-focus-ring);
+}
+
+.willa-reasoning-steps-toggle-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.14rem;
+}
+
+.willa-reasoning-steps-toggle-title {
+  color: var(--willa-reasoning-steps-title);
+  font-size: 0.86rem;
+  font-weight: 660;
+  line-height: 1.35;
+}
+
+.willa-reasoning-steps-toggle-summary {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-reasoning-steps-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-reasoning-steps-toggle-meta {
+  color: var(--willa-reasoning-steps-meta);
+  font-size: 0.74rem;
+  line-height: 1.35;
+  white-space: nowrap;
+}
+
+.willa-reasoning-steps-toggle-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--willa-reasoning-steps-muted);
+  transition: transform 150ms ease;
+}
+
+.willa-reasoning-steps--collapsed .willa-reasoning-steps-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.willa-reasoning-steps-timeline .willa-timeline-marker {
+  border-radius: 0.64rem;
+}
+
+.willa-reasoning-steps--sm .willa-timeline-marker {
+  border-radius: 0.52rem;
+}
+
+.willa-reasoning-steps--compact .willa-timeline-card {
+  padding: 0.7rem 0.82rem;
+  background: var(--willa-reasoning-steps-card-bg);
+}
+
+.willa-reasoning-steps--compact.willa-reasoning-steps--sm .willa-timeline-card {
+  padding: 0.62rem 0.72rem;
+}
+
+.willa-reasoning-steps-timeline .willa-timeline-icon svg {
+  width: 0.92rem;
+  height: 0.92rem;
+}
+
+.willa-reasoning-step-dot {
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.willa-reasoning-steps-timeline .willa-timeline-item-title {
+  font-weight: 660;
+}
+
+.willa-reasoning-steps-timeline .willa-timeline-meta {
+  color: var(--willa-reasoning-steps-meta);
+}
+
+.willa-reasoning-step-content {
+  display: block;
+  box-sizing: border-box;
+  padding: 0.56rem 0.64rem;
+  border: 1px solid var(--willa-reasoning-steps-panel-border);
+  border-radius: 0.62rem;
+  background: var(--willa-reasoning-steps-panel-bg);
+  color: var(--willa-reasoning-steps-panel-text);
+}
+
+.willa-reasoning-step--active .willa-timeline-card {
+  border-color: var(--willa-reasoning-steps-active-card-border);
+}
+
+.willa-reasoning-step--done .willa-timeline-card {
+  border-color: var(--willa-reasoning-steps-done-card-border);
+}
+
+.willa-reasoning-step--pending .willa-timeline-card {
+  border-color: var(--willa-reasoning-steps-pending-card-border);
+}
+
+.willa-reasoning-step--error .willa-timeline-card {
+  border-color: var(--willa-reasoning-steps-error-card-border);
+}
+
+@media (max-width: 767px) {
+  .willa-reasoning-steps-toggle {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .willa-reasoning-steps-toggle-meta {
+    display: none;
+  }
+
+  .willa-reasoning-steps-toggle-summary {
+    white-space: normal;
+  }
+}

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

@@ -0,0 +1,199 @@
+import {
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import {
+  ChevronDownIcon,
+  CheckIcon,
+  Cross2Icon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+import classNames from "classnames";
+import {
+  Timeline,
+  type TimelineItem,
+} from "@willa-ui/content/components/Timeline";
+import { useCollapsibleState } from "#ai/internal/cardCollapse";
+
+export type ReasoningStepStatus = "pending" | "active" | "done" | "error";
+export type ReasoningStepsSize = "sm" | "md";
+
+export type ReasoningStepItem = {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  content?: ReactNode;
+  icon?: ReactNode;
+  status?: ReasoningStepStatus;
+};
+
+export type ReasoningStepClickEvent = {
+  step: ReasoningStepItem;
+  index: number;
+  status: ReasoningStepStatus;
+  event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>;
+};
+
+export type ReasoningStepsProps = {
+  steps: Array<ReasoningStepItem>;
+  activeStep?: number;
+  size?: ReasoningStepsSize;
+  compact?: boolean;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  summary?: ReactNode;
+  onStepClick?: (event: ReasoningStepClickEvent) => void;
+  onCollapsedChange?: (collapsed: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+
+export function ReasoningSteps({
+  steps,
+  activeStep = 0,
+  size = "md",
+  compact = false,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  summary,
+  onStepClick,
+  onCollapsedChange,
+  className,
+  ...props
+}: ReasoningStepsProps) {
+  const isInteractive = Boolean(onStepClick);
+  const { canCollapse, isCollapsed, toggleCollapsed } = useCollapsibleState({
+    collapsible,
+    collapsed,
+    defaultCollapsed,
+    onCollapsedChange,
+  });
+  const currentStep = steps[activeStep] ?? steps[steps.length - 1];
+  const resolvedSummary =
+    summary ?? currentStep?.title ?? `${steps.length} 个处理步骤`;
+
+  return (
+    <div
+      {...props}
+      className={classNames(
+        "willa-reasoning-steps",
+        `willa-reasoning-steps--${size}`,
+        compact && "willa-reasoning-steps--compact",
+        isInteractive && "willa-reasoning-steps--interactive",
+        canCollapse && "willa-reasoning-steps--collapsible",
+        isCollapsed && "willa-reasoning-steps--collapsed",
+        className,
+      )}
+    >
+      {canCollapse ? (
+        <button
+          className="willa-reasoning-steps-toggle"
+          type="button"
+          aria-expanded={!isCollapsed}
+          onClick={toggleCollapsed}
+        >
+          <span className="willa-reasoning-steps-toggle-main">
+            <span className="willa-reasoning-steps-toggle-title">
+              {isCollapsed ? "查看处理过程" : "收起处理过程"}
+            </span>
+            <span className="willa-reasoning-steps-toggle-summary">
+              {resolvedSummary}
+            </span>
+          </span>
+          <span className="willa-reasoning-steps-toggle-meta">
+            {steps.length} 步
+          </span>
+          <ChevronDownIcon className="willa-reasoning-steps-toggle-icon" />
+        </button>
+      ) : null}
+
+      {!isCollapsed ? (
+        <Timeline
+          className="willa-reasoning-steps-timeline"
+          items={createReasoningTimelineItems({
+            activeStep,
+            onStepClick,
+            steps,
+          })}
+          size={size}
+          variant={compact ? "compact" : "default"}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const ReasoningStepMark = ({ status }: { status: ReasoningStepStatus }) => {
+  if (status === "done") {
+    return <CheckIcon />;
+  }
+  if (status === "error") {
+    return <Cross2Icon />;
+  }
+  if (status === "active") {
+    return <DotsHorizontalIcon />;
+  }
+  return <span className="willa-reasoning-step-dot" />;
+};
+
+const resolveReasoningStepStatus = (
+  step: ReasoningStepItem,
+  index: number,
+  activeStep: number,
+) => {
+  if (step.status) {
+    return step.status;
+  }
+  if (index < activeStep) {
+    return "done";
+  }
+  if (index === activeStep) {
+    return "active";
+  }
+  return "pending";
+};
+
+const createReasoningTimelineItems = (options: {
+  steps: Array<ReasoningStepItem>;
+  activeStep: number;
+  onStepClick?: (event: ReasoningStepClickEvent) => void;
+}): Array<TimelineItem> => {
+  const { steps, activeStep, onStepClick } = options;
+
+  return steps.map((step, index) => {
+    const status = resolveReasoningStepStatus(step, index, activeStep);
+
+    return {
+      id: step.id,
+      title: step.title,
+      description: step.description,
+      content: step.content ? (
+        <span className="willa-reasoning-step-content">{step.content}</span>
+      ) : undefined,
+      meta: step.meta,
+      icon: step.icon ?? <ReasoningStepMark status={status} />,
+      tone: reasoningStepToneMap[status],
+      className: classNames(
+        "willa-reasoning-step",
+        `willa-reasoning-step--${status}`,
+      ),
+      onClick: onStepClick
+        ? (event) => {
+            onStepClick({ step, index, status, event });
+          }
+        : undefined,
+    };
+  });
+};
+
+const reasoningStepToneMap = {
+  pending: "default",
+  active: "info",
+  done: "success",
+  error: "danger",
+} satisfies Record<ReasoningStepStatus, TimelineItem["tone"]>;
+
+ReasoningSteps.displayName = "ReasoningSteps";

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

@@ -0,0 +1,164 @@
+.willa-suggestion-chips {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--willa-suggestion-chips-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-suggestion-chips--disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.willa-suggestion-chip-item {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.willa-suggestion-chip {
+  display: inline-flex;
+  box-sizing: border-box;
+  max-width: min(100%, 22rem);
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--willa-suggestion-chips-border);
+  border-radius: 0.62rem;
+  background: var(--willa-suggestion-chips-bg);
+  color: inherit;
+  font: inherit;
+  letter-spacing: 0;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.willa-suggestion-chip:hover:not(:disabled) {
+  border-color: var(--willa-suggestion-chips-border-hover);
+  background: var(--willa-suggestion-chips-bg-hover);
+  color: var(--willa-suggestion-chips-text-hover);
+}
+
+.willa-suggestion-chip:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-suggestion-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.willa-suggestion-chip--selected {
+  border-color: var(--willa-suggestion-chips-selected-border);
+  background: var(--willa-suggestion-chips-selected-bg);
+  color: var(--willa-suggestion-chips-selected-text);
+}
+
+.willa-suggestion-chips--outline .willa-suggestion-chip {
+  background: transparent;
+}
+
+.willa-suggestion-chips--outline .willa-suggestion-chip--selected {
+  background: var(--willa-suggestion-chips-selected-bg);
+}
+
+.willa-suggestion-chips--outline .willa-suggestion-chip:hover:not(:disabled) {
+  background: var(--willa-suggestion-chips-bg-hover);
+}
+
+.willa-suggestion-chips--outline
+  .willa-suggestion-chip--selected:hover:not(:disabled) {
+  background: var(--willa-suggestion-chips-selected-bg);
+}
+
+.willa-suggestion-chip-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+.willa-suggestion-chip-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-suggestion-chip-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+}
+
+.willa-suggestion-chip-label,
+.willa-suggestion-chip-description {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-suggestion-chip-label {
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.willa-suggestion-chip-description {
+  color: var(--willa-suggestion-chips-muted);
+  font-size: 0.78em;
+  line-height: 1.25;
+}
+
+.willa-suggestion-chip--selected .willa-suggestion-chip-description {
+  color: currentColor;
+  opacity: 0.78;
+}
+
+.willa-suggestion-chips--sm {
+  gap: 0.38rem;
+}
+
+.willa-suggestion-chips--sm .willa-suggestion-chip {
+  min-height: 2.05rem;
+  padding: 0.32rem 0.72rem;
+  font-size: 0.82rem;
+}
+
+.willa-suggestion-chips--md .willa-suggestion-chip {
+  min-height: 2.46rem;
+  padding: 0.48rem 0.9rem;
+  font-size: 0.88rem;
+}
+
+@media (max-width: 767px) {
+  .willa-suggestion-chips {
+    gap: 0.42rem;
+  }
+
+  .willa-suggestion-chip {
+    max-width: 100%;
+    min-height: 2.5rem;
+    align-items: flex-start;
+    border-radius: 0.68rem;
+  }
+
+  .willa-suggestion-chip-label,
+  .willa-suggestion-chip-description {
+    display: -webkit-box;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

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

@@ -0,0 +1,142 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { useControllableState } from "@willa-ui/shared";
+
+export type SuggestionChipsSize = "sm" | "md";
+export type SuggestionChipsVariant = "soft" | "outline";
+
+export type SuggestionChipItem = {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+
+export type SuggestionChipsProps = {
+  items: Array<SuggestionChipItem>;
+  size?: SuggestionChipsSize;
+  variant?: SuggestionChipsVariant;
+  selectedIds?: Array<string>;
+  defaultSelectedIds?: Array<string>;
+  multiple?: boolean;
+  disabled?: boolean;
+  onSelect?: (
+    item: SuggestionChipItem,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => void;
+  onChange?: (
+    selectedIds: Array<string>,
+    item: SuggestionChipItem,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => void;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "onSelect">;
+
+export function SuggestionChips({
+  items,
+  size = "md",
+  variant = "soft",
+  selectedIds,
+  defaultSelectedIds = [],
+  multiple = false,
+  disabled = false,
+  onSelect,
+  onChange,
+  className,
+  ...props
+}: SuggestionChipsProps) {
+  const [currentSelectedIds, setCurrentSelectedIds] = useControllableState({
+    value: selectedIds,
+    defaultValue: defaultSelectedIds,
+  });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      {...props}
+      className={classNames(
+        "willa-suggestion-chips",
+        `willa-suggestion-chips--${size}`,
+        `willa-suggestion-chips--${variant}`,
+        disabled && "willa-suggestion-chips--disabled",
+        className,
+      )}
+      role="list"
+    >
+      {items.map((item) => {
+        const isSelected = currentSelectedIds.includes(item.id);
+        const isDisabled = disabled || item.disabled;
+
+        return (
+          <span
+            key={item.id}
+            className="willa-suggestion-chip-item"
+            role="listitem"
+          >
+            <button
+              className={classNames(
+                "willa-suggestion-chip",
+                isSelected && "willa-suggestion-chip--selected",
+              )}
+              type="button"
+              disabled={isDisabled}
+              aria-pressed={isSelected}
+              onClick={(event) => {
+                const nextSelectedIds = getNextSelectedIds({
+                  id: item.id,
+                  multiple,
+                  selectedIds: currentSelectedIds,
+                });
+
+                setCurrentSelectedIds(nextSelectedIds);
+                onSelect?.(item, event);
+                onChange?.(nextSelectedIds, item, event);
+              }}
+            >
+              {item.icon ? (
+                <span className="willa-suggestion-chip-icon" aria-hidden="true">
+                  {item.icon}
+                </span>
+              ) : null}
+              <span className="willa-suggestion-chip-content">
+                <span className="willa-suggestion-chip-label">
+                  {item.label}
+                </span>
+                {item.description ? (
+                  <span className="willa-suggestion-chip-description">
+                    {item.description}
+                  </span>
+                ) : null}
+              </span>
+            </button>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+const getNextSelectedIds = (options: {
+  id: string;
+  multiple: boolean;
+  selectedIds: Array<string>;
+}) => {
+  const { id, multiple, selectedIds } = options;
+
+  if (multiple) {
+    return selectedIds.includes(id)
+      ? selectedIds.filter((selectedId) => selectedId !== id)
+      : [...selectedIds, id];
+  }
+
+  return selectedIds.includes(id) ? [] : [id];
+};
+
+SuggestionChips.displayName = "SuggestionChips";