willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,237 @@
+.willa-context-window-meter {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 0.8rem;
+  border: 1px solid var(--willa-context-window-meter-border);
+  border-radius: 0.92rem;
+  background: var(--willa-context-window-meter-bg);
+  box-shadow: var(--willa-context-window-meter-shadow);
+  color: var(--willa-context-window-meter-text);
+  font-family: var(--willa-body-font);
+  padding: 0.92rem;
+}
+
+.willa-context-window-meter__header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.84rem;
+}
+
+.willa-context-window-meter__heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.28rem;
+}
+
+.willa-context-window-meter__title {
+  margin: 0;
+  overflow: hidden;
+  color: var(--willa-context-window-meter-title);
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-context-window-meter__description {
+  color: var(--willa-context-window-meter-muted);
+  font-size: 0.8rem;
+  line-height: 1.55;
+}
+
+.willa-context-window-meter__value {
+  flex: none;
+  color: var(--willa-context-window-meter-accent);
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.willa-context-window-meter__track {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.68rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--willa-context-window-meter-track-bg);
+}
+
+.willa-context-window-meter__fill {
+  display: block;
+  width: var(--willa-context-window-meter-value);
+  min-width: 0;
+  border-radius: inherit;
+  background: var(--willa-context-window-meter-accent);
+  transition: width 180ms ease;
+}
+
+.willa-context-window-meter__segment {
+  display: block;
+  width: var(--willa-context-window-meter-segment-value);
+  min-width: 0;
+  background: var(--willa-context-window-meter-segment-bg);
+  transition: width 180ms ease;
+}
+
+.willa-context-window-meter__segment + .willa-context-window-meter__segment {
+  box-shadow: inset 1px 0 0 var(--willa-context-window-meter-segment-divider);
+}
+
+.willa-context-window-meter__legend {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.44rem;
+  margin: 0;
+}
+
+.willa-context-window-meter__legend-item {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.36rem;
+  border: 1px solid var(--willa-context-window-meter-item-border);
+  border-radius: 0.58rem;
+  background: var(--willa-context-window-meter-item-bg);
+  padding: 0.34rem 0.5rem;
+}
+
+.willa-context-window-meter__legend-item dt,
+.willa-context-window-meter__legend-item dd {
+  min-width: 0;
+  margin: 0;
+}
+
+.willa-context-window-meter__legend-item dt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+  color: var(--willa-context-window-meter-title);
+  font-size: 0.74rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.willa-context-window-meter__legend-item dd {
+  color: var(--willa-context-window-meter-muted);
+  font-size: 0.72rem;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.willa-context-window-meter__legend-mark {
+  width: 0.42rem;
+  height: 0.42rem;
+  flex: none;
+  border-radius: 999px;
+  background: var(--willa-context-window-meter-segment-bg);
+}
+
+.willa-context-window-meter--sm {
+  gap: 0.62rem;
+  border-radius: 0.8rem;
+  padding: 0.72rem;
+}
+
+.willa-context-window-meter--sm .willa-context-window-meter__track {
+  height: 0.48rem;
+}
+
+.willa-context-window-meter--neutral {
+  --willa-context-window-meter-accent: var(
+    --willa-context-window-meter-neutral
+  );
+}
+
+.willa-context-window-meter--info {
+  --willa-context-window-meter-accent: var(--willa-context-window-meter-info);
+}
+
+.willa-context-window-meter--success {
+  --willa-context-window-meter-accent: var(
+    --willa-context-window-meter-success
+  );
+}
+
+.willa-context-window-meter--warning {
+  --willa-context-window-meter-accent: var(
+    --willa-context-window-meter-warning
+  );
+}
+
+.willa-context-window-meter--danger {
+  --willa-context-window-meter-accent: var(--willa-context-window-meter-danger);
+}
+
+.willa-context-window-meter__segment--neutral,
+.willa-context-window-meter__legend-mark--neutral {
+  --willa-context-window-meter-segment-bg: var(
+    --willa-context-window-meter-neutral
+  );
+}
+
+.willa-context-window-meter__segment--info,
+.willa-context-window-meter__legend-mark--info {
+  --willa-context-window-meter-segment-bg: var(
+    --willa-context-window-meter-info
+  );
+}
+
+.willa-context-window-meter__segment--success,
+.willa-context-window-meter__legend-mark--success {
+  --willa-context-window-meter-segment-bg: var(
+    --willa-context-window-meter-success
+  );
+}
+
+.willa-context-window-meter__segment--warning,
+.willa-context-window-meter__legend-mark--warning {
+  --willa-context-window-meter-segment-bg: var(
+    --willa-context-window-meter-warning
+  );
+}
+
+.willa-context-window-meter__segment--danger,
+.willa-context-window-meter__legend-mark--danger {
+  --willa-context-window-meter-segment-bg: var(
+    --willa-context-window-meter-danger
+  );
+}
+
+@media (max-width: 767px) {
+  .willa-context-window-meter {
+    border-radius: 0.84rem;
+    padding: 0.74rem;
+  }
+
+  .willa-context-window-meter__header {
+    display: grid;
+    gap: 0.42rem;
+  }
+
+  .willa-context-window-meter__title {
+    white-space: normal;
+  }
+
+  .willa-context-window-meter__value {
+    text-align: start;
+    white-space: normal;
+  }
+
+  .willa-context-window-meter__legend {
+    display: grid;
+  }
+
+  .willa-context-window-meter__legend-item {
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,266 @@
+import {
+  type CSSProperties,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { clampNumber } from "@willa-ui/shared";
+
+export type ContextWindowMeterTone =
+  | "neutral"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type ContextWindowMeterSize = "sm" | "md";
+
+export type ContextWindowMeterSegment = {
+  id: string;
+  label: ReactNode;
+  value: number;
+  tone?: ContextWindowMeterTone;
+  meta?: ReactNode;
+};
+
+export type ContextWindowMeterProps = {
+  value: number;
+  max: number;
+  label?: ReactNode;
+  description?: ReactNode;
+  unit?: ReactNode;
+  size?: ContextWindowMeterSize;
+  tone?: ContextWindowMeterTone;
+  warningThreshold?: number;
+  dangerThreshold?: number;
+  segments?: Array<ContextWindowMeterSegment>;
+  showValue?: boolean;
+  formatValue?: (value: number, max: number) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<"section">, "children">;
+
+const defaultWarningThreshold = 0.72;
+const defaultDangerThreshold = 0.9;
+const remainderSegmentId = "__willa-context-window-meter-remainder";
+const remainderSegmentLabel = "未分类";
+
+export function ContextWindowMeter({
+  value,
+  max,
+  label = "上下文窗口",
+  description,
+  unit = "tokens",
+  size = "md",
+  tone,
+  warningThreshold = defaultWarningThreshold,
+  dangerThreshold = defaultDangerThreshold,
+  segments,
+  showValue = true,
+  formatValue,
+  className,
+  style,
+  ...props
+}: ContextWindowMeterProps) {
+  const hasSegments = segments !== undefined && segments.length > 0;
+  const resolvedMax = Number.isFinite(max) && max > 0 ? max : 0;
+  const normalizedValue =
+    resolvedMax > 0 ? clampNumber(value, 0, resolvedMax) : 0;
+  const ratio = resolvedMax > 0 ? normalizedValue / resolvedMax : 0;
+  const resolvedTone =
+    tone ?? getContextWindowMeterTone(ratio, warningThreshold, dangerThreshold);
+  const renderedSegments =
+    hasSegments && resolvedMax > 0
+      ? getContextWindowMeterSegments(
+          segments,
+          normalizedValue,
+          resolvedMax,
+          resolvedTone,
+        )
+      : [];
+
+  const defaultValueText = `${formatCompactNumber(
+    normalizedValue,
+  )} / ${formatCompactNumber(resolvedMax)} ${
+    typeof unit === "string" ? unit : ""
+  }`.trim();
+
+  const valueLabel =
+    formatValue?.(normalizedValue, resolvedMax) ??
+    renderContextWindowMeterValue(normalizedValue, resolvedMax, unit);
+
+  const meterStyle = {
+    "--willa-context-window-meter-value": `${ratio * 100}%`,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <section
+      {...props}
+      className={classNames(
+        "willa-context-window-meter",
+        `willa-context-window-meter--${size}`,
+        `willa-context-window-meter--${resolvedTone}`,
+        className,
+      )}
+      data-tone={resolvedTone}
+      style={meterStyle}
+    >
+      <div className="willa-context-window-meter__header">
+        <div className="willa-context-window-meter__heading">
+          {label ? (
+            <h3 className="willa-context-window-meter__title">{label}</h3>
+          ) : null}
+          {description ? (
+            <div className="willa-context-window-meter__description">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        {showValue ? (
+          <div className="willa-context-window-meter__value">{valueLabel}</div>
+        ) : null}
+      </div>
+
+      <div
+        className="willa-context-window-meter__track"
+        role="meter"
+        aria-valuemin={0}
+        aria-valuemax={resolvedMax}
+        aria-valuenow={normalizedValue}
+        aria-valuetext={
+          typeof valueLabel === "string" ? valueLabel : defaultValueText
+        }
+      >
+        {hasSegments ? (
+          renderedSegments.map((segment) => (
+            <span
+              className={classNames(
+                "willa-context-window-meter__segment",
+                `willa-context-window-meter__segment--${segment.tone}`,
+              )}
+              key={segment.id}
+              style={
+                {
+                  "--willa-context-window-meter-segment-value": `${
+                    segment.ratio * 100
+                  }%`,
+                } as CSSProperties
+              }
+            />
+          ))
+        ) : (
+          <span className="willa-context-window-meter__fill" />
+        )}
+      </div>
+
+      {hasSegments ? (
+        <dl className="willa-context-window-meter__legend">
+          {renderedSegments.map((segment) => (
+            <div
+              className="willa-context-window-meter__legend-item"
+              key={segment.id}
+            >
+              <dt>
+                <span
+                  className={classNames(
+                    "willa-context-window-meter__legend-mark",
+                    `willa-context-window-meter__legend-mark--${segment.tone}`,
+                  )}
+                  aria-hidden="true"
+                />
+                <span className="willa-context-window-meter__legend-label">
+                  {segment.label}
+                </span>
+              </dt>
+              <dd>
+                {segment.meta ??
+                  `${formatCompactNumber(segment.renderedValue)} ${
+                    typeof unit === "string" ? unit : ""
+                  }`}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+    </section>
+  );
+}
+
+const getContextWindowMeterSegments = (
+  segments: Array<ContextWindowMeterSegment>,
+  value: number,
+  max: number,
+  fallbackTone: ContextWindowMeterTone,
+) => {
+  let remainingValue = value;
+  const renderedSegments = segments
+    .map((segment) => {
+      const segmentValue = clampNumber(segment.value, 0, max);
+      const renderedValue = clampNumber(segmentValue, 0, remainingValue);
+      remainingValue -= renderedValue;
+
+      return {
+        id: segment.id,
+        label: segment.label,
+        meta: renderedValue === segmentValue ? segment.meta : null,
+        ratio: renderedValue / max,
+        renderedValue,
+        tone: segment.tone ?? "neutral",
+      };
+    })
+    .filter((segment) => segment.renderedValue > 0);
+
+  if (remainingValue > 0) {
+    renderedSegments.push({
+      id: remainderSegmentId,
+      label: remainderSegmentLabel,
+      meta: null,
+      ratio: remainingValue / max,
+      renderedValue: remainingValue,
+      tone: fallbackTone,
+    });
+  }
+
+  return renderedSegments;
+};
+
+const getContextWindowMeterTone = (
+  ratio: number,
+  warningThreshold: number,
+  dangerThreshold: number,
+) => {
+  if (ratio >= dangerThreshold) {
+    return "danger";
+  }
+
+  if (ratio >= warningThreshold) {
+    return "warning";
+  }
+
+  return "info";
+};
+
+const renderContextWindowMeterValue = (
+  value: number,
+  max: number,
+  unit: ReactNode,
+) => {
+  return (
+    <>
+      {formatCompactNumber(value)} / {formatCompactNumber(max)}
+      {unit ? <> {unit}</> : null}
+    </>
+  );
+};
+
+const formatCompactNumber = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+
+  return new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: value >= 1000 ? 1 : 0,
+    notation: value >= 10000 ? "compact" : "standard",
+  }).format(value);
+};
+
+ContextWindowMeter.displayName = "ContextWindowMeter";