willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,230 @@
+.willa-thinking-indicator {
+  display: inline-grid;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  border: 1px solid var(--willa-thinking-indicator-border);
+  border-radius: 0.9rem;
+  background: var(--willa-thinking-indicator-bg);
+  color: var(--willa-thinking-indicator-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-thinking-indicator--collapsible {
+  width: min(100%, 32rem);
+  max-width: 100%;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.willa-thinking-indicator--sm {
+  gap: 0.64rem;
+  padding: 0.56rem 0.68rem;
+}
+
+.willa-thinking-indicator--md {
+  gap: 0.78rem;
+  padding: 0.74rem 0.86rem;
+}
+
+.willa-thinking-indicator--compact {
+  border-color: transparent;
+  background: transparent;
+  padding: 0;
+}
+
+.willa-thinking-indicator-toggle {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.68rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  text-align: start;
+}
+
+.willa-thinking-indicator-toggle:focus-visible {
+  border-radius: 6px;
+  box-shadow: 0 0 0 3px var(--willa-thinking-indicator-ring);
+  outline: none;
+}
+
+.willa-thinking-indicator-toggle-body {
+  display: grid;
+  min-width: 0;
+  gap: 0.14rem;
+}
+
+.willa-thinking-indicator-toggle-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--willa-thinking-indicator-muted);
+  transition: transform 150ms ease;
+}
+
+.willa-thinking-indicator--collapsed .willa-thinking-indicator-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.willa-thinking-indicator-mark {
+  display: inline-flex;
+  width: 1.76rem;
+  height: 1.76rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.62rem;
+  background: var(--willa-thinking-indicator-mark-bg);
+  color: var(--willa-thinking-indicator-mark);
+}
+
+.willa-thinking-indicator--compact .willa-thinking-indicator-mark {
+  width: auto;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  background: transparent;
+}
+
+.willa-thinking-indicator-mark svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.willa-thinking-indicator-body {
+  display: grid;
+  min-width: 0;
+  gap: 0.18rem;
+}
+
+.willa-thinking-indicator--collapsible .willa-thinking-indicator-body {
+  padding-block-start: 0.1rem;
+}
+
+.willa-thinking-indicator-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-thinking-indicator-title);
+  font-size: 0.9rem;
+  font-weight: 680;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-thinking-indicator--sm .willa-thinking-indicator-label {
+  font-size: 0.8rem;
+}
+
+.willa-thinking-indicator-description {
+  color: var(--willa-thinking-indicator-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.willa-thinking-indicator-steps {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.36rem;
+  padding-block-start: 0.16rem;
+}
+
+.willa-thinking-indicator-step {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 1.38rem;
+  align-items: center;
+  border: 1px solid var(--willa-thinking-indicator-step-border);
+  border-radius: 0.5rem;
+  background: var(--willa-thinking-indicator-step-bg);
+  color: var(--willa-thinking-indicator-muted);
+  font-size: 0.72rem;
+  font-weight: 620;
+  line-height: 1;
+  padding: 0 0.48rem;
+}
+
+.willa-thinking-indicator-step--done {
+  border-color: var(--willa-thinking-indicator-step-done-border);
+  background: var(--willa-thinking-indicator-step-done-bg);
+  color: var(--willa-thinking-indicator-step-done-text);
+}
+
+.willa-thinking-indicator-step--active {
+  border-color: var(--willa-thinking-indicator-step-active-border);
+  background: var(--willa-thinking-indicator-step-active-bg);
+  color: var(--willa-thinking-indicator-step-active-text);
+}
+
+.willa-thinking-indicator-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.14rem;
+}
+
+.willa-thinking-indicator-dots span {
+  width: 0.24rem;
+  height: 0.24rem;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.44;
+}
+
+.willa-thinking-indicator--animated .willa-thinking-indicator-dots span {
+  animation: willa-thinking-indicator-dot 960ms ease-in-out infinite;
+}
+
+.willa-thinking-indicator--animated
+  .willa-thinking-indicator-dots
+  span:nth-child(2) {
+  animation-delay: 120ms;
+}
+
+.willa-thinking-indicator--animated
+  .willa-thinking-indicator-dots
+  span:nth-child(3) {
+  animation-delay: 240ms;
+}
+
+.willa-thinking-indicator--neutral {
+  --willa-thinking-indicator-mark: var(--willa-thinking-indicator-neutral);
+}
+
+.willa-thinking-indicator--accent {
+  --willa-thinking-indicator-mark: var(--willa-thinking-indicator-accent);
+}
+
+.willa-thinking-indicator--success {
+  --willa-thinking-indicator-mark: var(--willa-thinking-indicator-success);
+}
+
+.willa-thinking-indicator--warning {
+  --willa-thinking-indicator-mark: var(--willa-thinking-indicator-warning);
+}
+
+@keyframes willa-thinking-indicator-dot {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-0.12rem);
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-thinking-indicator {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,162 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import { useCollapsibleState } from "#ai/internal/cardCollapse";
+
+export type ThinkingIndicatorStatus =
+  | "thinking"
+  | "searching"
+  | "reading"
+  | "generating"
+  | "working";
+export type ThinkingIndicatorSize = "sm" | "md";
+export type ThinkingIndicatorTone =
+  | "neutral"
+  | "accent"
+  | "success"
+  | "warning";
+
+export type ThinkingIndicatorProps = {
+  status?: ThinkingIndicatorStatus;
+  label?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  steps?: Array<ReactNode>;
+  activeStep?: number;
+  size?: ThinkingIndicatorSize;
+  tone?: ThinkingIndicatorTone;
+  animated?: boolean;
+  compact?: boolean;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  summary?: ReactNode;
+  onCollapsedChange?: (collapsed: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+
+export function ThinkingIndicator({
+  status = "thinking",
+  label,
+  description,
+  icon,
+  steps,
+  activeStep = 0,
+  size = "md",
+  tone = "accent",
+  animated = true,
+  compact = false,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  summary,
+  onCollapsedChange,
+  className,
+  ...props
+}: ThinkingIndicatorProps) {
+  const resolvedLabel = label ?? thinkingIndicatorLabelMap[status];
+  const hasSteps = steps !== undefined && steps.length > 0;
+  const { canCollapse, isCollapsed, toggleCollapsed } = useCollapsibleState({
+    collapsible,
+    collapsed,
+    defaultCollapsed,
+    onCollapsedChange,
+  });
+  const resolvedSummary = summary ?? description ?? resolvedLabel;
+
+  return (
+    <div
+      {...props}
+      className={classNames(
+        "willa-thinking-indicator",
+        `willa-thinking-indicator--${status}`,
+        `willa-thinking-indicator--${size}`,
+        `willa-thinking-indicator--${tone}`,
+        animated && "willa-thinking-indicator--animated",
+        compact && "willa-thinking-indicator--compact",
+        canCollapse && "willa-thinking-indicator--collapsible",
+        isCollapsed && "willa-thinking-indicator--collapsed",
+        className,
+      )}
+      role={props.role ?? "status"}
+      aria-live={props["aria-live"] ?? "polite"}
+    >
+      {canCollapse ? (
+        <button
+          className="willa-thinking-indicator-toggle"
+          type="button"
+          aria-expanded={!isCollapsed}
+          onClick={toggleCollapsed}
+        >
+          <span className="willa-thinking-indicator-mark" aria-hidden="true">
+            {icon ?? <ThinkingDots />}
+          </span>
+          <span className="willa-thinking-indicator-toggle-body">
+            <span className="willa-thinking-indicator-label">
+              {isCollapsed ? "查看处理状态" : resolvedLabel}
+            </span>
+            {isCollapsed ? (
+              <span className="willa-thinking-indicator-description">
+                {resolvedSummary}
+              </span>
+            ) : null}
+          </span>
+          <ChevronDownIcon className="willa-thinking-indicator-toggle-icon" />
+        </button>
+      ) : (
+        <span className="willa-thinking-indicator-mark" aria-hidden="true">
+          {icon ?? <ThinkingDots />}
+        </span>
+      )}
+      {!isCollapsed ? (
+        <span className="willa-thinking-indicator-body">
+          {!canCollapse ? (
+            <span className="willa-thinking-indicator-label">
+              {resolvedLabel}
+            </span>
+          ) : null}
+          {description ? (
+            <span className="willa-thinking-indicator-description">
+              {description}
+            </span>
+          ) : null}
+          {hasSteps ? (
+            <span className="willa-thinking-indicator-steps">
+              {steps.map((step, index) => (
+                <span
+                  key={index}
+                  className={classNames(
+                    "willa-thinking-indicator-step",
+                    index < activeStep && "willa-thinking-indicator-step--done",
+                    index === activeStep &&
+                      "willa-thinking-indicator-step--active",
+                  )}
+                >
+                  {step}
+                </span>
+              ))}
+            </span>
+          ) : null}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+const ThinkingDots = () => (
+  <span className="willa-thinking-indicator-dots">
+    <span />
+    <span />
+    <span />
+  </span>
+);
+
+const thinkingIndicatorLabelMap: Record<ThinkingIndicatorStatus, string> = {
+  thinking: "正在思考",
+  searching: "正在检索",
+  reading: "正在读取",
+  generating: "正在生成",
+  working: "正在处理",
+};
+
+ThinkingIndicator.displayName = "ThinkingIndicator";

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

@@ -0,0 +1,244 @@
+.willa-tool-call-card {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 0.86rem;
+  border: 1px solid var(--willa-tool-call-card-border);
+  border-radius: 1rem;
+  background: var(--willa-tool-call-card-bg);
+  box-shadow: var(--willa-tool-call-card-shadow);
+  color: var(--willa-tool-call-card-text);
+  font-family: var(--willa-body-font);
+  padding: 0.94rem;
+}
+
+.willa-tool-call-card--collapsible {
+  width: min(100%, 36rem);
+  max-width: 100%;
+}
+
+.willa-tool-call-card-mark {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 2.12rem;
+  height: 2.12rem;
+  flex: none;
+  place-items: center;
+  border: 1px solid var(--willa-tool-call-card-mark-border);
+  border-radius: 0.68rem;
+  background: var(--willa-tool-call-card-mark-bg);
+  color: var(--willa-tool-call-card-accent);
+}
+
+.willa-tool-call-card-mark svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.willa-tool-call-card-body {
+  display: grid;
+  min-width: 0;
+  gap: 0.52rem;
+}
+
+.willa-tool-call-card-header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.72rem;
+}
+
+.willa-tool-call-card-title-row {
+  display: inline-flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.42rem;
+}
+
+.willa-tool-call-card-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-tool-call-card-title);
+  font-size: 0.96rem;
+  font-weight: 700;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-tool-call-card-status {
+  display: inline-flex;
+  min-height: 1.3rem;
+  align-items: center;
+  border: 1px solid var(--willa-tool-call-card-status-border);
+  border-radius: 0.48rem;
+  background: var(--willa-tool-call-card-status-bg);
+  color: var(--willa-tool-call-card-accent);
+  font-size: 0.72rem;
+  font-weight: 620;
+  line-height: 1;
+  padding: 0 0.46rem;
+  white-space: nowrap;
+}
+
+.willa-tool-call-card-meta {
+  flex: none;
+  color: var(--willa-tool-call-card-muted);
+  font-size: 0.75rem;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.willa-tool-call-card-description {
+  color: var(--willa-tool-call-card-text);
+  font-size: 0.82rem;
+  line-height: 1.58;
+}
+
+.willa-tool-call-card-toggle {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.32rem;
+  border: 1px solid var(--willa-tool-call-card-status-border);
+  border-radius: 0.52rem;
+  background: var(--willa-tool-call-card-status-bg);
+  color: var(--willa-tool-call-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-tool-call-card-toggle:hover {
+  border-color: var(--willa-tool-call-card-toggle-border-hover);
+  color: var(--willa-tool-call-card-title);
+}
+
+.willa-tool-call-card-toggle:focus-visible {
+  box-shadow: 0 0 0 3px var(--willa-tool-call-card-ring);
+  outline: none;
+}
+
+.willa-tool-call-card-toggle-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-tool-call-card-toggle-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex: none;
+  transition: transform 150ms ease;
+}
+
+.willa-tool-call-card--collapsed .willa-tool-call-card-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.willa-tool-call-card-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.42rem;
+  border: 1px solid var(--willa-tool-call-card-panel-border);
+  border-radius: 0.68rem;
+  background: var(--willa-tool-call-card-panel-bg);
+  color: var(--willa-tool-call-card-panel-text);
+  padding: 0.42rem;
+}
+
+.willa-tool-call-card-parameters,
+.willa-tool-call-card-result {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 0.46rem;
+  border: 1px solid var(--willa-tool-call-card-item-border);
+  border-radius: 0.52rem;
+  background: var(--willa-tool-call-card-item-bg);
+  color: var(--willa-tool-call-card-muted);
+  font-size: 0.76rem;
+  line-height: 1.52;
+  padding: 0.56rem 0.64rem;
+}
+
+.willa-tool-call-card-parameters::before,
+.willa-tool-call-card-result::before {
+  width: 0.34rem;
+  height: 0.34rem;
+  margin-block-start: 0.42rem;
+  border-radius: 50%;
+  background: var(--willa-tool-call-card-item-marker);
+  content: "";
+}
+
+.willa-tool-call-card-actions {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+  padding-block-start: 0.08rem;
+}
+
+.willa-tool-call-card-status-dot {
+  width: 0.48rem;
+  height: 0.48rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.willa-tool-call-card--pending {
+  --willa-tool-call-card-accent: var(--willa-tool-call-card-pending);
+}
+
+.willa-tool-call-card--running {
+  --willa-tool-call-card-accent: var(--willa-tool-call-card-running);
+}
+
+.willa-tool-call-card--success {
+  --willa-tool-call-card-accent: var(--willa-tool-call-card-success);
+}
+
+.willa-tool-call-card--error {
+  --willa-tool-call-card-accent: var(--willa-tool-call-card-error);
+}
+
+@media (max-width: 767px) {
+  .willa-tool-call-card {
+    gap: 0.66rem;
+    padding: 0.72rem;
+  }
+
+  .willa-tool-call-card-mark {
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 0.66rem;
+  }
+
+  .willa-tool-call-card-header {
+    display: grid;
+    gap: 0.26rem;
+  }
+
+  .willa-tool-call-card-name {
+    white-space: normal;
+  }
+
+  .willa-tool-call-card-meta {
+    white-space: normal;
+  }
+}