@springbrand/message-panel 0.1.0 → 0.1.2

package/src/composer/composer.tsx

@@ -1,425 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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;
-}