willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,256 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { Cross2Icon, DownloadIcon } from "@radix-ui/react-icons";
+import {
+  canOpenFilePreviewDialog,
+  normalizeFileProgress,
+  resolveFilePreviewMode,
+  type FileItemStatus,
+  type FilePreviewMode,
+} from "@willa-ui/shared";
+import classNames from "classnames";
+
+import {
+  FilePreviewDialog,
+  type FilePreviewType,
+} from "@willa-ui/content/components/FilePreview";
+import { FileCardIcon } from "@willa-ui/content/components/FileCard";
+
+export type AttachmentListItemStatus = FileItemStatus;
+export type AttachmentListSize = "sm" | "md";
+export type AttachmentListLayout = "inline" | "stack";
+export type AttachmentListPreviewMode = FilePreviewMode;
+
+export type AttachmentListItem = {
+  id: string;
+  name: string;
+  meta?: ReactNode;
+  href?: string;
+  downloadName?: string;
+  icon?: ReactNode;
+  previewMode?: AttachmentListPreviewMode;
+  previewType?: FilePreviewType;
+  mimeType?: string;
+  text?: string;
+  language?: string;
+  poster?: string;
+  alt?: string;
+  status?: AttachmentListItemStatus;
+  progress?: number;
+  actions?: ReactNode;
+  disabled?: boolean;
+};
+
+export type AttachmentListItemEvent = {
+  item: AttachmentListItem;
+  event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
+};
+
+export type AttachmentListProps = {
+  items: Array<AttachmentListItem>;
+  size?: AttachmentListSize;
+  layout?: AttachmentListLayout;
+  previewMode?: AttachmentListPreviewMode;
+  empty?: ReactNode;
+  onOpen?: (event: AttachmentListItemEvent) => void;
+  onRemove?: (item: AttachmentListItem) => void;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+
+export function AttachmentList({
+  items,
+  size = "sm",
+  layout = "inline",
+  previewMode = "dialog",
+  empty,
+  onOpen,
+  onRemove,
+  className,
+  ...props
+}: AttachmentListProps) {
+  if (items.length === 0) {
+    return empty ? (
+      <div
+        {...props}
+        className={classNames(
+          "willa-attachment-list",
+          "willa-attachment-list--empty",
+          `willa-attachment-list--${size}`,
+          `willa-attachment-list--${layout}`,
+          className,
+        )}
+      >
+        {empty}
+      </div>
+    ) : null;
+  }
+
+  return (
+    <div
+      {...props}
+      className={classNames(
+        "willa-attachment-list",
+        `willa-attachment-list--${size}`,
+        `willa-attachment-list--${layout}`,
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <AttachmentListItemView
+          key={item.id}
+          item={item}
+          previewMode={previewMode}
+          onOpen={onOpen}
+          onRemove={onRemove}
+        />
+      ))}
+    </div>
+  );
+}
+
+const AttachmentListItemView = ({
+  item,
+  previewMode,
+  onOpen,
+  onRemove,
+}: {
+  item: AttachmentListItem;
+  previewMode: AttachmentListPreviewMode;
+  onOpen?: (event: AttachmentListItemEvent) => void;
+  onRemove?: (item: AttachmentListItem) => void;
+}) => {
+  const status = item.status ?? "ready";
+  const resolvedPreviewMode = resolveFilePreviewMode(
+    item.previewMode,
+    previewMode,
+  );
+  const canPreviewInDialog = canOpenFilePreviewDialog({
+    disabled: item.disabled,
+    href: item.href,
+    previewMode: resolvedPreviewMode,
+    status,
+  });
+  const normalizedProgress = normalizeFileProgress(item.progress);
+  const entryClassName = classNames(
+    "willa-attachment-list-entry",
+    `willa-attachment-list-entry--${status}`,
+    item.disabled && "willa-attachment-list-entry--disabled",
+  );
+  const content = (
+    <>
+      <FileCardIcon
+        className="willa-attachment-list-icon"
+        icon={item.icon}
+        name={item.name}
+        size="sm"
+      />
+      <span className="willa-attachment-list-content">
+        <span className="willa-attachment-list-name" title={item.name}>
+          {item.name}
+        </span>
+        {item.meta || status !== "ready" ? (
+          <span className="willa-attachment-list-meta">
+            {status !== "ready" ? attachmentStatusLabelMap[status] : item.meta}
+          </span>
+        ) : null}
+        {status === "uploading" && typeof normalizedProgress === "number" ? (
+          <span className="willa-attachment-list-progress" aria-hidden="true">
+            <span
+              style={{
+                inlineSize: `${normalizedProgress}%`,
+              }}
+            />
+          </span>
+        ) : null}
+      </span>
+      {item.href ? (
+        <span className="willa-attachment-list-download" aria-hidden="true">
+          <DownloadIcon />
+        </span>
+      ) : null}
+    </>
+  );
+  const itemClassName = classNames("willa-attachment-list-item");
+
+  return (
+    <span className={entryClassName}>
+      {canPreviewInDialog ? (
+        <FilePreviewDialog
+          src={item.href ?? ""}
+          name={item.name}
+          type={item.previewType}
+          mimeType={item.mimeType}
+          meta={item.meta}
+          text={item.text}
+          language={item.language}
+          poster={item.poster}
+          alt={item.alt}
+          downloadName={item.downloadName ?? item.name}
+          trigger={
+            <button
+              className={itemClassName}
+              type="button"
+              onClick={(event) => onOpen?.({ item, event })}
+            >
+              {content}
+            </button>
+          }
+        />
+      ) : item.href && resolvedPreviewMode !== "none" ? (
+        <a
+          className={itemClassName}
+          href={item.disabled ? undefined : item.href}
+          download={
+            item.disabled || resolvedPreviewMode === "link"
+              ? undefined
+              : (item.downloadName ?? true)
+          }
+          target={resolvedPreviewMode === "link" ? "_blank" : undefined}
+          rel={resolvedPreviewMode === "link" ? "noreferrer" : undefined}
+          aria-disabled={item.disabled || undefined}
+          tabIndex={item.disabled ? -1 : undefined}
+          onClick={(event) => {
+            if (item.disabled) {
+              event.preventDefault();
+              return;
+            }
+
+            onOpen?.({ item, event });
+          }}
+        >
+          {content}
+        </a>
+      ) : (
+        <button
+          className={itemClassName}
+          type="button"
+          disabled={item.disabled}
+          onClick={(event) => onOpen?.({ item, event })}
+        >
+          {content}
+        </button>
+      )}
+      <span className="willa-attachment-list-trailing">
+        {item.actions ? (
+          <span className="willa-attachment-list-actions">{item.actions}</span>
+        ) : null}
+        {onRemove ? (
+          <button
+            className="willa-attachment-list-remove"
+            type="button"
+            aria-label={`移除 ${item.name}`}
+            onClick={() => onRemove(item)}
+          >
+            <Cross2Icon />
+          </button>
+        ) : null}
+      </span>
+    </span>
+  );
+};
+
+const attachmentStatusLabelMap: Record<AttachmentListItemStatus, string> = {
+  error: "上传失败",
+  ready: "已连接",
+  uploading: "上传中",
+};
+
+AttachmentList.displayName = "AttachmentList";

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

@@ -0,0 +1,211 @@
+.willa-chat-message {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 0.82rem;
+  color: var(--willa-chat-message-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-chat-message--right {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.willa-chat-message--right .willa-chat-message-avatar {
+  grid-column: 2;
+}
+
+.willa-chat-message--right .willa-chat-message-body {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: flex-end;
+}
+
+.willa-chat-message--center {
+  display: flex;
+  justify-content: center;
+}
+
+.willa-chat-message-body {
+  display: grid;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: min(100%, 42rem);
+  min-width: 0;
+  gap: 0.48rem;
+}
+
+.willa-chat-message--compact .willa-chat-message-body {
+  gap: 0.32rem;
+}
+
+.willa-chat-message-header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+}
+
+.willa-chat-message--right .willa-chat-message-header {
+  flex-direction: row-reverse;
+}
+
+.willa-chat-message-heading {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.willa-chat-message-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-chat-message-name);
+  font-size: 0.82rem;
+  font-weight: 700;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-chat-message-meta,
+.willa-chat-message-status,
+.willa-chat-message-footer {
+  color: var(--willa-chat-message-meta);
+  font-size: 0.76rem;
+  line-height: 1.4;
+}
+
+.willa-chat-message-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+}
+
+.willa-chat-message-actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.36rem;
+  opacity: 0.72;
+  transition: opacity 150ms ease;
+}
+
+.willa-chat-message:hover .willa-chat-message-actions,
+.willa-chat-message:focus-within .willa-chat-message-actions {
+  opacity: 1;
+}
+
+.willa-chat-message-content {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 0.9rem 1.02rem;
+  border: 1px solid var(--willa-chat-message-border);
+  border-radius: 0.82rem;
+  background: var(--willa-chat-message-bg);
+  box-shadow: var(--willa-chat-message-shadow);
+  color: var(--willa-chat-message-text);
+  font-size: 0.94rem;
+  line-height: 1.68;
+}
+
+.willa-chat-message--compact .willa-chat-message-content {
+  padding: 0.62rem 0.78rem;
+  border-radius: 0.66rem;
+  font-size: 0.88rem;
+  line-height: 1.58;
+}
+
+.willa-chat-message-content > :first-child {
+  margin-top: 0;
+}
+
+.willa-chat-message-content > :last-child {
+  margin-bottom: 0;
+}
+
+.willa-chat-message-content p {
+  margin: 0;
+}
+
+.willa-chat-message-content p + p {
+  margin-top: 0.55rem;
+}
+
+.willa-chat-message--assistant .willa-chat-message-content {
+  border-color: var(--willa-chat-message-border);
+  background: var(--willa-chat-message-assistant-bg);
+}
+
+.willa-chat-message--user .willa-chat-message-content {
+  padding: 0.9rem 1.02rem;
+  border-color: var(--willa-chat-message-user-border);
+  background: var(--willa-chat-message-user-bg);
+}
+
+.willa-chat-message--system .willa-chat-message-body {
+  width: fit-content;
+  max-width: min(100%, 34rem);
+}
+
+.willa-chat-message--system .willa-chat-message-content {
+  padding: 0.2rem 0;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--willa-chat-message-system-text);
+  font-size: 0.84rem;
+  text-align: center;
+}
+
+.willa-chat-message--developer .willa-chat-message-content {
+  padding: 0.68rem 0.84rem;
+  border-color: var(--willa-chat-message-developer-border);
+  background: var(--willa-chat-message-developer-bg);
+  color: var(--willa-chat-message-developer-text);
+}
+
+.willa-chat-message--tool .willa-chat-message-content {
+  padding: 0.72rem 0.86rem;
+  border-color: var(--willa-chat-message-tool-border);
+  background: var(--willa-chat-message-tool-bg);
+}
+
+.willa-chat-message-footer {
+  padding-inline: 0;
+}
+
+.willa-chat-message--right .willa-chat-message-footer {
+  text-align: right;
+}
+
+@media (max-width: 767px) {
+  .willa-chat-message {
+    gap: 0.58rem;
+  }
+
+  .willa-chat-message-body {
+    max-width: min(100%, 100%);
+  }
+
+  .willa-chat-message-content {
+    padding: 0.64rem 0.76rem;
+    border-radius: 0.66rem;
+    font-size: 0.88rem;
+    line-height: 1.6;
+  }
+
+  .willa-chat-message--user .willa-chat-message-content,
+  .willa-chat-message--developer .willa-chat-message-content,
+  .willa-chat-message--tool .willa-chat-message-content {
+    padding: 0.68rem 0.78rem;
+  }
+
+  .willa-chat-message-header {
+    align-items: flex-start;
+  }
+}

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

@@ -0,0 +1,126 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import classNames from "classnames";
+import { Avatar } from "@willa-ui/content/components/Avatar";
+
+export type ChatMessageRole =
+  | "assistant"
+  | "user"
+  | "system"
+  | "developer"
+  | "tool";
+export type ChatMessageAlign = "left" | "right" | "center";
+
+export type ChatMessageProps = {
+  role?: ChatMessageRole;
+  align?: ChatMessageAlign;
+  name?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  showAvatar?: boolean;
+  meta?: ReactNode;
+  status?: ReactNode;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  compact?: boolean;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"article">, "children">;
+
+export function ChatMessage(props: ChatMessageProps) {
+  const {
+    role = "assistant",
+    align,
+    name,
+    avatarSrc,
+    avatarAlt,
+    showAvatar: showAvatarProp,
+    meta,
+    status,
+    actions,
+    footer,
+    compact = false,
+    className,
+    children,
+    ...messageProps
+  } = props;
+  const resolvedAlign = align ?? chatMessageAlignMap[role];
+  const resolvedName = name ?? getDefaultChatMessageName(role);
+  const showAvatar =
+    showAvatarProp ??
+    (role !== "user" && role !== "system" && resolvedAlign !== "center");
+  const showHeader = resolvedName || meta || status || actions;
+  const showFooter =
+    footer !== undefined && footer !== null && footer !== false;
+
+  return (
+    <article
+      {...messageProps}
+      className={classNames(
+        "willa-chat-message",
+        `willa-chat-message--${role}`,
+        `willa-chat-message--${resolvedAlign}`,
+        compact && "willa-chat-message--compact",
+        className,
+      )}
+    >
+      {showAvatar ? (
+        <Avatar
+          className="willa-chat-message-avatar"
+          name={resolvedName}
+          src={avatarSrc}
+          alt={avatarAlt}
+          size="md"
+        />
+      ) : null}
+      <div className="willa-chat-message-body">
+        {showHeader ? (
+          <div className="willa-chat-message-header">
+            <div className="willa-chat-message-heading">
+              {resolvedName ? (
+                <span className="willa-chat-message-name">{resolvedName}</span>
+              ) : null}
+              {meta ? (
+                <span className="willa-chat-message-meta">{meta}</span>
+              ) : null}
+              {status ? (
+                <span className="willa-chat-message-status">{status}</span>
+              ) : null}
+            </div>
+            {actions ? (
+              <div className="willa-chat-message-actions">{actions}</div>
+            ) : null}
+          </div>
+        ) : null}
+        <div className="willa-chat-message-content">{children}</div>
+        {showFooter ? (
+          <div className="willa-chat-message-footer">{footer}</div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
+
+const chatMessageAlignMap: Record<ChatMessageRole, ChatMessageAlign> = {
+  assistant: "left",
+  user: "right",
+  system: "center",
+  developer: "left",
+  tool: "left",
+};
+
+const chatMessageNameMap: Record<ChatMessageRole, string> = {
+  assistant: "Assistant",
+  user: "You",
+  system: "System",
+  developer: "Developer",
+  tool: "Tool",
+};
+
+const getDefaultChatMessageName = (role: ChatMessageRole) => {
+  if (role === "assistant" || role === "developer" || role === "tool") {
+    return chatMessageNameMap[role];
+  }
+
+  return "";
+};
+
+ChatMessage.displayName = "ChatMessage";