willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/ChatThread/index.css

@@ -0,0 +1,141 @@
+.willa-chat {
+  margin: 1.8rem 0;
+  padding: 1.1rem;
+  border-radius: 10px;
+  background: var(--willa-chat-bg);
+}
+
+.willa-chat-header {
+  margin-bottom: 0.9rem;
+}
+
+.willa-chat-title {
+  margin: 0;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.willa-chat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.willa-chat-message-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.willa-chat-time {
+  align-self: center;
+  color: var(--willa-chat-time-text);
+  font-size: 0.78rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.willa-chat-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  width: 100%;
+}
+
+.willa-chat-item--right {
+  flex-direction: row-reverse;
+}
+
+.willa-chat-item--left {
+  align-self: flex-start;
+}
+
+.willa-chat .willa-chat-avatar {
+  border-color: var(--willa-chat-avatar-border);
+  background: var(--willa-chat-avatar-bg);
+  color: var(--willa-text-strong);
+}
+
+.willa-chat-body {
+  display: flex;
+  max-width: min(34rem, calc(100% - 3.4rem));
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.34rem;
+}
+
+.willa-chat-item--right .willa-chat-body {
+  align-items: flex-end;
+}
+
+.willa-chat-name {
+  margin: 0;
+  color: var(--willa-chat-name-text);
+  font-size: 0.76rem;
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.willa-chat-bubble {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.58rem 0.72rem;
+  border-radius: 8px;
+  background: var(--willa-chat-bubble-bg);
+  color: var(--willa-chat-bubble-text);
+}
+
+.willa-chat-bubble::before {
+  position: absolute;
+  top: 0.65rem;
+  left: -0.52rem;
+  width: 0.52rem;
+  height: 0.72rem;
+  background: var(--willa-chat-bubble-bg);
+  clip-path: polygon(100% 0, 0 50%, 100% 100%);
+  content: "";
+}
+
+.willa-chat-item--right .willa-chat-bubble {
+  background: var(--willa-chat-bubble-user-bg);
+  color: var(--willa-chat-bubble-user-text);
+}
+
+.willa-chat-item--right .willa-chat-bubble::before {
+  right: -0.52rem;
+  left: auto;
+  background: var(--willa-chat-bubble-user-bg);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+.willa-chat-line {
+  margin: 0;
+  color: inherit;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.willa-chat-line + .willa-chat-line {
+  margin-top: 0.34rem;
+}
+
+@media (max-width: 767px) {
+  .willa-chat {
+    margin: 1.5rem 0;
+    padding: 0.9rem 0.7rem;
+  }
+
+  .willa-chat-body {
+    max-width: calc(100% - 3.2rem);
+  }
+
+  .willa-chat-line {
+    font-size: 0.86rem;
+    line-height: 1.6;
+  }
+}

package/packages/willa-content/src/components/ChatThread/index.tsx

@@ -0,0 +1,118 @@
+import classNames from "classnames";
+
+import { Avatar } from "#content/components/Avatar";
+import { Collapse } from "#content/components/Collapse";
+
+type ChatMessage = {
+  align?: "left" | "right";
+  avatarSrc?: string;
+  name?: string;
+  time?: string;
+  content: string | Array<string>;
+};
+
+export type ChatThreadProps = {
+  title?: string;
+  messages: Array<ChatMessage>;
+  className?: string;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+};
+
+export function ChatThread(props: ChatThreadProps) {
+  const {
+    title,
+    messages,
+    className,
+    collapsible,
+    defaultOpen = false,
+  } = props;
+
+  return (
+    <section className={classNames("willa-chat", className)}>
+      {collapsible ? (
+        <Collapse
+          title={title ?? "对话记录"}
+          defaultOpen={defaultOpen}
+          size="sm"
+          className="willa-chat-collapse"
+        >
+          <ChatMessages messages={messages} />
+        </Collapse>
+      ) : (
+        <>
+          {title ? (
+            <header className="willa-chat-header">
+              <h3 className="willa-chat-title">{title}</h3>
+            </header>
+          ) : null}
+          <ChatMessages messages={messages} />
+        </>
+      )}
+    </section>
+  );
+}
+
+type ChatMessagesProps = {
+  messages: Array<ChatMessage>;
+};
+
+const ChatMessages = (props: ChatMessagesProps) => {
+  const { messages } = props;
+
+  return (
+    <div className="willa-chat-list">
+      {messages.map((message, index) => {
+        const lines = Array.isArray(message.content)
+          ? message.content
+          : [message.content];
+        const align = message.align ?? "left";
+        const avatarName =
+          message.name?.trim() || (align === "right" ? "User" : "Assistant");
+
+        return (
+          <div
+            className="willa-chat-message-group"
+            key={`${align}-${avatarName}-${index}`}
+          >
+            {message.time ? (
+              <time className="willa-chat-time">{message.time}</time>
+            ) : null}
+            <article
+              className={classNames(
+                "willa-chat-item",
+                `willa-chat-item--${align}`,
+              )}
+            >
+              <Avatar
+                className="willa-chat-avatar"
+                src={message.avatarSrc}
+                name={avatarName}
+                alt={avatarName}
+                size="md"
+                shape="rounded"
+              />
+              <div className="willa-chat-body">
+                {message.name ? (
+                  <p className="willa-chat-name">{message.name}</p>
+                ) : null}
+                <div className="willa-chat-bubble">
+                  {lines.map((line, lineIndex) => (
+                    <p
+                      key={`${align}-${message.name ?? "message"}-${index}-${lineIndex}`}
+                      className="willa-chat-line"
+                    >
+                      {line}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            </article>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ChatThread.displayName = "ChatThread";

package/packages/willa-content/src/components/Citation/index.css

@@ -0,0 +1,226 @@
+.willa-citation {
+  display: inline-flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.34rem;
+  border: 1px solid var(--willa-citation-border);
+  border-radius: 999px;
+  background: var(--willa-citation-bg);
+  color: var(--willa-citation-text);
+  font-family: var(--willa-body-font);
+  text-align: left;
+  text-decoration: none;
+  vertical-align: middle;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    transform 150ms ease;
+}
+
+.willa-citation--xs {
+  min-height: 1.12rem;
+  padding: 0.03rem 0.24rem 0.03rem 0.12rem;
+  font-size: 0.62rem;
+}
+
+.willa-citation--sm {
+  min-height: 1.62rem;
+  padding: 0.16rem 0.46rem 0.16rem 0.24rem;
+  font-size: 0.76rem;
+}
+
+.willa-citation--md {
+  min-height: 2rem;
+  padding: 0.24rem 0.6rem 0.24rem 0.34rem;
+  font-size: 0.86rem;
+}
+
+.willa-citation--lg {
+  min-height: 2.32rem;
+  padding: 0.32rem 0.76rem 0.32rem 0.42rem;
+  font-size: 0.94rem;
+}
+
+.willa-citation--interactive {
+  appearance: none;
+  cursor: pointer;
+}
+
+.willa-citation--interactive:hover {
+  border-color: var(--willa-citation-border-hover);
+  background: var(--willa-citation-bg-hover);
+  color: var(--willa-citation-text-hover);
+  transform: translateY(-1px);
+}
+
+.willa-citation--interactive:focus-visible {
+  outline: 2px solid var(--willa-citation-ring);
+  outline-offset: 2px;
+}
+
+.willa-citation--selected {
+  border-color: var(--willa-citation-selected-border);
+  background: var(--willa-citation-selected-bg);
+  color: var(--willa-citation-selected-text);
+}
+
+.willa-citation--with-detail {
+  border-radius: 1rem;
+  padding: 0.5rem 0.62rem 0.5rem 0.48rem;
+}
+
+.willa-citation--xs.willa-citation--with-detail {
+  min-height: 2.2rem;
+  padding: 0.42rem 0.56rem 0.42rem 0.42rem;
+  font-size: 0.72rem;
+}
+
+.willa-citation--lg.willa-citation--with-detail {
+  padding: 0.62rem 0.82rem 0.62rem 0.62rem;
+}
+
+.willa-citation-mark {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 1.12rem;
+  height: 1.12rem;
+  flex: none;
+  place-items: center;
+  border: 1px solid var(--willa-citation-mark-border);
+  border-radius: 50%;
+  background: var(--willa-citation-mark-bg);
+  color: var(--willa-citation-mark-text);
+  font-size: 0.7em;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.willa-citation-mark svg {
+  width: 0.78rem;
+  height: 0.78rem;
+}
+
+.willa-citation-body {
+  display: grid;
+  min-width: 0;
+  gap: 0.06rem;
+}
+
+.willa-citation-main {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.26rem;
+}
+
+.willa-citation-label,
+.willa-citation-source,
+.willa-citation-detail,
+.willa-citation-status {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-citation-label {
+  color: var(--willa-citation-title);
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.willa-citation--xs .willa-citation-label {
+  font-size: 0.88em;
+  font-weight: 520;
+  line-height: 1;
+}
+
+.willa-citation--xs .willa-citation-mark {
+  width: 0.9rem;
+  height: 0.9rem;
+  font-size: 0.64em;
+}
+
+.willa-citation--xs .willa-citation-mark svg {
+  width: 0.62rem;
+  height: 0.62rem;
+}
+
+.willa-citation--xs .willa-citation-source,
+.willa-citation--xs .willa-citation-detail,
+.willa-citation--xs .willa-citation-status {
+  font-size: 0.78em;
+  line-height: 1;
+}
+
+.willa-citation--xs .willa-citation-main {
+  align-items: center;
+  gap: 0.2rem;
+  line-height: 1;
+}
+
+.willa-citation-source {
+  color: var(--willa-citation-muted);
+  font-size: 0.9em;
+  line-height: 1.25;
+}
+
+.willa-citation-detail {
+  color: var(--willa-citation-muted);
+  font-size: 0.88em;
+  line-height: 1.3;
+}
+
+.willa-citation-status {
+  flex: none;
+  color: var(--willa-citation-status);
+  font-size: 0.84em;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.willa-citation-link-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  flex: none;
+  color: var(--willa-citation-muted);
+}
+
+.willa-citation-link-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-citation--info {
+  --willa-citation-bg: var(--willa-citation-info-bg);
+  --willa-citation-bg-hover: var(--willa-citation-info-bg-hover);
+  --willa-citation-border: var(--willa-citation-info-border);
+  --willa-citation-border-hover: var(--willa-citation-info-border-hover);
+  --willa-citation-mark-bg: var(--willa-citation-info-mark-bg);
+  --willa-citation-mark-border: var(--willa-citation-info-mark-border);
+  --willa-citation-mark-text: var(--willa-citation-info-mark-text);
+}
+
+.willa-citation--success {
+  --willa-citation-bg: var(--willa-citation-success-bg);
+  --willa-citation-bg-hover: var(--willa-citation-success-bg-hover);
+  --willa-citation-border: var(--willa-citation-success-border);
+  --willa-citation-border-hover: var(--willa-citation-success-border-hover);
+  --willa-citation-mark-bg: var(--willa-citation-success-mark-bg);
+  --willa-citation-mark-border: var(--willa-citation-success-mark-border);
+  --willa-citation-mark-text: var(--willa-citation-success-mark-text);
+}
+
+.willa-citation--warning {
+  --willa-citation-bg: var(--willa-citation-warning-bg);
+  --willa-citation-bg-hover: var(--willa-citation-warning-bg-hover);
+  --willa-citation-border: var(--willa-citation-warning-border);
+  --willa-citation-border-hover: var(--willa-citation-warning-border-hover);
+  --willa-citation-mark-bg: var(--willa-citation-warning-mark-bg);
+  --willa-citation-mark-border: var(--willa-citation-warning-mark-border);
+  --willa-citation-mark-text: var(--willa-citation-warning-mark-text);
+}

package/packages/willa-content/src/components/Citation/index.tsx

@@ -0,0 +1,135 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+export type CitationTone = "neutral" | "info" | "success" | "warning";
+export type CitationSize = "xs" | "sm" | "md" | "lg";
+
+export type CitationProps = {
+  label?: ReactNode;
+  source?: ReactNode;
+  index?: ReactNode;
+  status?: ReactNode;
+  href?: string;
+  target?: string;
+  tone?: CitationTone;
+  size?: CitationSize;
+  selected?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+  onOpen?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+} & Omit<ComponentPropsWithoutRef<"span">, "children" | "onClick" | "title">;
+
+const hasContent = (value: ReactNode) => {
+  if (typeof value === "string") return value.trim().length > 0;
+  return value !== undefined && value !== null && value !== false;
+};
+
+const resolveHrefLabel = (href?: string) => {
+  if (!href) return undefined;
+  try {
+    const url = new URL(href);
+    return url.hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+};
+
+export function Citation({
+  label,
+  source,
+  index,
+  status,
+  href,
+  target,
+  tone = "neutral",
+  size = "md",
+  selected = false,
+  icon,
+  children,
+  onOpen,
+  className,
+  ...props
+}: CitationProps) {
+  const displayLabel = hasContent(label) ? label : resolveHrefLabel(href);
+  const hasDetail = hasContent(children);
+
+  if (!hasContent(displayLabel) && !hasDetail) return null;
+
+  const content = (
+    <>
+      <span className="willa-citation-mark" aria-hidden="true">
+        {icon ?? index ?? "C"}
+      </span>
+      <span className="willa-citation-body">
+        {hasContent(displayLabel) || hasContent(source) ? (
+          <span className="willa-citation-main">
+            {hasContent(displayLabel) ? (
+              <span className="willa-citation-label">{displayLabel}</span>
+            ) : null}
+            {hasContent(source) ? (
+              <span className="willa-citation-source">{source}</span>
+            ) : null}
+          </span>
+        ) : null}
+        {hasDetail ? (
+          <span className="willa-citation-detail">{children}</span>
+        ) : null}
+      </span>
+      {hasContent(status) ? (
+        <span className="willa-citation-status">{status}</span>
+      ) : null}
+      {href ? (
+        <span className="willa-citation-link-icon" aria-hidden="true">
+          <ExternalLinkIcon />
+        </span>
+      ) : null}
+    </>
+  );
+
+  const rootClassName = classNames(
+    "willa-citation",
+    `willa-citation--${tone}`,
+    `willa-citation--${size}`,
+    selected && "willa-citation--selected",
+    hasDetail && "willa-citation--with-detail",
+    (href || onOpen) && "willa-citation--interactive",
+    className,
+  );
+
+  if (href) {
+    return (
+      <a
+        {...props}
+        className={rootClassName}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noreferrer" : undefined}
+        onClick={onOpen}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  if (onOpen) {
+    return (
+      <button
+        {...props}
+        className={rootClassName}
+        type="button"
+        onClick={onOpen}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span {...props} className={rootClassName}>
+      {content}
+    </span>
+  );
+}
+
+Citation.displayName = "Citation";