@springbrand/message-panel 0.1.2 → 0.1.3-alpha.1

package/src/composer/composer.tsx

@@ -0,0 +1,425 @@
+import {
+  ArrowUpIcon,
+  Loader2Icon,
+  PlusIcon,
+  SquareIcon,
+} from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type ClipboardEvent,
+  type DragEvent,
+  type HTMLAttributes,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "../internal/cn";
+import {
+  AttachmentPreview,
+  AttachmentRemove,
+  AttachmentReorder,
+  AttachmentRetry,
+  Attachments,
+} from "./composer-attachments";
+import { useComposerDrop } from "./drop-controller";
+import type {
+  ComposerAttachmentView,
+  ComposerProps,
+} from "./types";
+
+export const ComposerHeader = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-composer__header", className)} {...props} />
+));
+ComposerHeader.displayName = "ComposerHeader";
+
+export const ComposerBody = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-composer__body", className)} {...props} />
+));
+ComposerBody.displayName = "ComposerBody";
+
+export const ComposerFooter = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-composer__footer", className)} {...props} />
+));
+ComposerFooter.displayName = "ComposerFooter";
+
+export const ComposerTools = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-composer__tools", className)} {...props} />
+));
+ComposerTools.displayName = "ComposerTools";
+
+export const ComposerSubmit = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    status?: "idle" | "submitted" | "streaming";
+  }
+>(({ className, status = "idle", children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn("sb-composer__submit", className)}
+    {...props}
+  >
+    {children ??
+      (status === "submitted" ? (
+        <Loader2Icon size={16} className="sb-spin" />
+      ) : status === "streaming" ? (
+        <SquareIcon size={15} />
+      ) : (
+        <ArrowUpIcon size={17} />
+      ))}
+  </button>
+));
+ComposerSubmit.displayName = "ComposerSubmit";
+
+export function DropOverlay({
+  label = "松开以添加文件",
+}: {
+  label?: string;
+}) {
+  return (
+    <div className="sb-composer__drop" role="status">
+      <PlusIcon size={20} />
+      <span>{label}</span>
+    </div>
+  );
+}
+
+const ATTACHMENT_DRAG_TYPE = "application/x-sb-message-panel-attachment";
+
+function defaultAttachment<T>(attachment: T, index: number): ComposerAttachmentView {
+  const record =
+    attachment != null && typeof attachment === "object"
+      ? (attachment as Record<string, unknown>)
+      : {};
+  return {
+    id: String(record.id ?? `attachment-${index}`),
+    name: String(record.name ?? record.filename ?? "附件"),
+    mediaType:
+      typeof record.mediaType === "string" ? record.mediaType : undefined,
+    size: typeof record.size === "number" ? record.size : undefined,
+    url: typeof record.url === "string" ? record.url : undefined,
+    status:
+      record.status === "uploading" || record.status === "error"
+        ? record.status
+        : "ready",
+    note: typeof record.note === "string" ? record.note : undefined,
+  };
+}
+
+function matchesAccept(file: File, accept?: string): boolean {
+  if (!accept?.trim()) return true;
+  return accept
+    .split(",")
+    .map((value) => value.trim().toLowerCase())
+    .some((rule) => {
+      if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule);
+      if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1));
+      return file.type.toLowerCase() === rule;
+    });
+}
+
+function ComposerInner<TAttachment>(
+  {
+    value,
+    defaultValue = "",
+    onValueChange,
+    status,
+    attachments = [],
+    getAttachment = defaultAttachment,
+    dropScope = "composer",
+    dropTarget,
+    accept,
+    multiple = true,
+    maxFiles,
+    maxFileSize,
+    onFilesAdded,
+    onAttachmentRemove,
+    onAttachmentRetry,
+    onAttachmentReorder,
+    onValidationError,
+    onSubmit,
+    onStop,
+    placeholder = "问点什么…",
+    tools,
+    textareaProps,
+    textareaRef: externalTextareaRef,
+    className,
+    ...props
+  }: ComposerProps<TAttachment>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const resolvedValue = value ?? internalValue;
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const localTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement);
+  useImperativeHandle(
+    externalTextareaRef,
+    () => localTextareaRef.current as HTMLTextAreaElement,
+  );
+  const attachmentViews = useMemo(
+    () => attachments.map((attachment, index) => getAttachment(attachment, index)),
+    [attachments, getAttachment],
+  );
+  const generating = status === "submitted" || status === "streaming";
+  const allReady = attachmentViews.every(
+    (attachment) => attachment.status === "ready",
+  );
+  const canSend =
+    (resolvedValue.trim().length > 0 || attachments.length > 0) &&
+    !generating &&
+    allReady;
+
+  const changeValue = useCallback(
+    (next: string) => {
+      if (value === undefined) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [value, onValueChange],
+  );
+
+  const addFiles = useCallback(
+    (incoming: FileList | readonly File[]) => {
+      const all = Array.from(incoming);
+      const remaining =
+        maxFiles === undefined
+          ? all.length
+          : Math.max(0, maxFiles - attachments.length);
+      const selected = multiple ? all.slice(0, remaining) : all.slice(0, 1);
+      const valid = selected.filter(
+        (file) =>
+          matchesAccept(file, accept) &&
+          (maxFileSize === undefined || file.size <= maxFileSize),
+      );
+      const invalid = selected.filter((file) => !valid.includes(file));
+      if (all.length > selected.length) {
+        onValidationError?.(`最多只能添加 ${maxFiles ?? 1} 个附件`, all);
+      }
+      if (invalid.length) {
+        onValidationError?.("存在不支持或超过大小限制的文件", invalid);
+      }
+      if (valid.length) void onFilesAdded?.(valid);
+    },
+    [
+      accept,
+      attachments.length,
+      maxFiles,
+      maxFileSize,
+      multiple,
+      onFilesAdded,
+      onValidationError,
+    ],
+  );
+
+  const dragging = useComposerDrop({
+    scope: dropScope,
+    rootRef,
+    target: dropTarget,
+    onFiles: addFiles,
+  });
+
+  const submit = useCallback(async () => {
+    if (!canSend) return;
+    await onSubmit({ text: resolvedValue.trim(), attachments });
+    if (value === undefined) setInternalValue("");
+  }, [canSend, onSubmit, resolvedValue, attachments, value]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    textareaProps?.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (
+      event.key === "Enter" &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      event.preventDefault();
+      if (canSend) void submit();
+      return;
+    }
+    if (
+      event.key === "Backspace" &&
+      event.currentTarget.value === "" &&
+      attachments.length > 0
+    ) {
+      const last = attachments[attachments.length - 1];
+      if (last) {
+        event.preventDefault();
+        onAttachmentRemove?.(last);
+      }
+    }
+  };
+
+  const handlePaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    textareaProps?.onPaste?.(event);
+    if (event.defaultPrevented) return;
+    const files = Array.from(event.clipboardData.items)
+      .filter((item) => item.kind === "file")
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file !== null);
+    if (files.length) {
+      event.preventDefault();
+      addFiles(files);
+    }
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("sb-composer", className)}
+      data-drop-scope={dropScope}
+      data-dragging={dragging ? "true" : undefined}
+      data-status={status}
+      {...props}
+    >
+      <input
+        ref={inputRef}
+        className="sb-sr-only"
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        tabIndex={-1}
+        aria-label="上传文件"
+        onChange={(event) => {
+          if (event.currentTarget.files) addFiles(event.currentTarget.files);
+          event.currentTarget.value = "";
+        }}
+      />
+      {attachments.length > 0 && (
+        <ComposerHeader>
+          <Attachments>
+            {attachments.map((attachment, index) => {
+              const view = attachmentViews[index];
+              return (
+                <AttachmentPreview
+                  key={view.id}
+                  attachment={view}
+                  draggable={Boolean(onAttachmentReorder)}
+                  aria-roledescription={
+                    onAttachmentReorder ? "可排序附件" : undefined
+                  }
+                  onDragStart={(event: DragEvent<HTMLDivElement>) => {
+                    if (!onAttachmentReorder) return;
+                    event.dataTransfer.effectAllowed = "move";
+                    event.dataTransfer.setData(
+                      ATTACHMENT_DRAG_TYPE,
+                      String(index),
+                    );
+                  }}
+                  onDragOver={(event: DragEvent<HTMLDivElement>) => {
+                    if (
+                      onAttachmentReorder &&
+                      event.dataTransfer.types.includes(ATTACHMENT_DRAG_TYPE)
+                    ) {
+                      event.preventDefault();
+                      event.dataTransfer.dropEffect = "move";
+                    }
+                  }}
+                  onDrop={(event: DragEvent<HTMLDivElement>) => {
+                    if (!onAttachmentReorder) return;
+                    const fromIndex = Number(
+                      event.dataTransfer.getData(ATTACHMENT_DRAG_TYPE),
+                    );
+                    if (
+                      Number.isInteger(fromIndex) &&
+                      fromIndex >= 0 &&
+                      fromIndex < attachments.length &&
+                      fromIndex !== index
+                    ) {
+                      event.preventDefault();
+                      onAttachmentReorder(fromIndex, index);
+                    }
+                  }}
+                  actions={
+                    <>
+                      {view.status === "error" && onAttachmentRetry && (
+                        <AttachmentRetry onClick={() => void onAttachmentRetry(attachment)} />
+                      )}
+                      {onAttachmentReorder && index > 0 && (
+                        <AttachmentReorder
+                          direction="left"
+                          onClick={() => onAttachmentReorder(index, index - 1)}
+                        />
+                      )}
+                      {onAttachmentReorder && index < attachments.length - 1 && (
+                        <AttachmentReorder
+                          direction="right"
+                          onClick={() => onAttachmentReorder(index, index + 1)}
+                        />
+                      )}
+                      {onAttachmentRemove && (
+                        <AttachmentRemove
+                          onClick={() => onAttachmentRemove(attachment)}
+                        />
+                      )}
+                    </>
+                  }
+                />
+              );
+            })}
+          </Attachments>
+        </ComposerHeader>
+      )}
+      <ComposerBody>
+        <textarea
+          {...textareaProps}
+          ref={localTextareaRef}
+          value={resolvedValue}
+          rows={1}
+          placeholder={placeholder}
+          onChange={(event) => changeValue(event.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+        />
+      </ComposerBody>
+      <ComposerFooter>
+        <ComposerTools>
+          <button
+            type="button"
+            className="sb-composer__tool"
+            aria-label="添加图片或文件"
+            onClick={() => inputRef.current?.click()}
+          >
+            <PlusIcon size={17} />
+          </button>
+          {tools}
+        </ComposerTools>
+        <ComposerSubmit
+          status={
+            status === "submitted"
+              ? "submitted"
+              : status === "streaming"
+                ? "streaming"
+                : "idle"
+          }
+          disabled={generating ? !onStop : !canSend}
+          aria-label={generating ? "停止" : "发送"}
+          onClick={() => (generating ? void onStop?.() : void submit())}
+        />
+      </ComposerFooter>
+      {dragging && <DropOverlay />}
+    </div>
+  );
+}
+
+export const Composer = forwardRef(ComposerInner) as <TAttachment>(
+  props: ComposerProps<TAttachment> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+  },
+) => React.ReactElement;

package/src/composer/drop-controller.ts

@@ -0,0 +1,80 @@
+import { useEffect, useState, type RefObject } from "react";
+import type { ComposerDropScope } from "./types";
+
+function carriesFiles(event: DragEvent): boolean {
+  return event.dataTransfer?.types?.includes("Files") === true;
+}
+
+export function useComposerDrop({
+  scope,
+  rootRef,
+  target,
+  onFiles,
+}: {
+  scope: ComposerDropScope;
+  rootRef: RefObject<HTMLElement | null>;
+  target?: HTMLElement | null;
+  onFiles: (files: FileList) => void;
+}) {
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => {
+    const element =
+      scope === "document"
+        ? document
+        : scope === "panel"
+          ? target ??
+            rootRef.current?.closest<HTMLElement>("[data-sb-message-panel]") ??
+            rootRef.current
+          : rootRef.current;
+    if (!element) return;
+    let depth = 0;
+
+    const over = (event: Event) => {
+      const dragEvent = event as DragEvent;
+      if (carriesFiles(dragEvent)) dragEvent.preventDefault();
+    };
+    const enter = (event: Event) => {
+      const dragEvent = event as DragEvent;
+      if (!carriesFiles(dragEvent)) return;
+      dragEvent.preventDefault();
+      depth += 1;
+      setDragging(true);
+    };
+    const leave = (event: Event) => {
+      const dragEvent = event as DragEvent;
+      if (!carriesFiles(dragEvent)) return;
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) setDragging(false);
+    };
+    const drop = (event: Event) => {
+      const dragEvent = event as DragEvent;
+      if (!carriesFiles(dragEvent)) return;
+      dragEvent.preventDefault();
+      depth = 0;
+      setDragging(false);
+      if (dragEvent.dataTransfer?.files.length) onFiles(dragEvent.dataTransfer.files);
+    };
+    const cancel = () => {
+      depth = 0;
+      setDragging(false);
+    };
+
+    element.addEventListener("dragover", over);
+    element.addEventListener("dragenter", enter);
+    element.addEventListener("dragleave", leave);
+    element.addEventListener("drop", drop);
+    window.addEventListener("dragend", cancel);
+    window.addEventListener("blur", cancel);
+    return () => {
+      element.removeEventListener("dragover", over);
+      element.removeEventListener("dragenter", enter);
+      element.removeEventListener("dragleave", leave);
+      element.removeEventListener("drop", drop);
+      window.removeEventListener("dragend", cancel);
+      window.removeEventListener("blur", cancel);
+    };
+  }, [scope, target, rootRef, onFiles]);
+
+  return dragging;
+}

package/src/composer/types.ts

@@ -0,0 +1,79 @@
+import type {
+  HTMLAttributes,
+  ReactNode,
+  RefObject,
+  TextareaHTMLAttributes,
+} from "react";
+import type { MessagePanelStatus } from "../contracts";
+
+export type ComposerDropScope = "composer" | "panel" | "document";
+export type AttachmentStatus = "uploading" | "ready" | "error";
+
+export interface ComposerAttachmentView {
+  id: string;
+  name: string;
+  mediaType?: string;
+  size?: number;
+  url?: string;
+  status: AttachmentStatus;
+  note?: string;
+}
+
+export interface ComposerMessage<TAttachment> {
+  text: string;
+  attachments: readonly TAttachment[];
+}
+
+export interface ComposerCommand {
+  name: string;
+  description: string;
+  prompt: string;
+  icon?: "plan" | "research" | "file" | "time" | "tool" | "mcp";
+}
+
+export interface ComposerToolbarAction {
+  id: string;
+  label: string;
+  icon?: "sparkles" | "plus";
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+export interface ComposerProps<TAttachment>
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSubmit"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  status: MessagePanelStatus;
+  attachments?: readonly TAttachment[];
+  getAttachment?: (attachment: TAttachment, index: number) => ComposerAttachmentView;
+  dropScope?: ComposerDropScope;
+  dropTarget?: HTMLElement | null;
+  accept?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxFileSize?: number;
+  onFilesAdded?: (files: readonly File[]) => void | Promise<void>;
+  onAttachmentRemove?: (attachment: TAttachment) => void;
+  onAttachmentRetry?: (attachment: TAttachment) => void | Promise<void>;
+  onAttachmentReorder?: (fromIndex: number, toIndex: number) => void;
+  onValidationError?: (message: string, files: readonly File[]) => void;
+  onSubmit: (message: ComposerMessage<TAttachment>) => void | Promise<void>;
+  onStop?: () => void | Promise<void>;
+  placeholder?: string;
+  tools?: ReactNode;
+  textareaProps?: Omit<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    "value" | "defaultValue" | "onChange" | "onSubmit"
+  >;
+  textareaRef?: RefObject<HTMLTextAreaElement | null>;
+}
+
+export interface ChatComposerProps<TAttachment>
+  extends ComposerProps<TAttachment> {
+  commands?: readonly ComposerCommand[];
+  toolbarActions?: readonly ComposerToolbarAction[];
+  variant?: "docked" | "standalone";
+  commandMenuLabel?: string;
+  onCommandPick?: (command: ComposerCommand) => void;
+}