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

package/src/composer/chat-composer.tsx

@@ -0,0 +1,216 @@
+import {
+  PlusIcon,
+  SparklesIcon,
+} from "lucide-react";
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "../internal/cn";
+import { Composer } from "./composer";
+import type {
+  ChatComposerProps,
+  ComposerCommand,
+  ComposerToolbarAction,
+} from "./types";
+
+const toolbarIcons = {
+  plus: PlusIcon,
+  sparkles: SparklesIcon,
+} as const;
+
+function ToolbarAction({ action }: { action: ComposerToolbarAction }) {
+  const Icon = action.icon ? toolbarIcons[action.icon] : undefined;
+  return (
+    <button
+      type="button"
+      className="sb-chat-composer__action"
+      disabled={action.disabled}
+      onClick={action.onSelect}
+    >
+      {Icon && <Icon size={16} />}
+      <span>{action.label}</span>
+    </button>
+  );
+}
+
+function CommandMenu({
+  commands,
+  active,
+  label,
+  onActiveChange,
+  onPick,
+}: {
+  commands: readonly ComposerCommand[];
+  active: number;
+  label: string;
+  onActiveChange: (index: number) => void;
+  onPick: (command: ComposerCommand) => void;
+}) {
+  return (
+    <div
+      className="sb-command-menu"
+      role="listbox"
+      aria-label={label}
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      <div className="sb-command-menu__label">{label}</div>
+      <div className="sb-command-menu__list">
+        {commands.map((command, index) => (
+          <button
+            key={command.name}
+            type="button"
+            role="option"
+            aria-selected={index === active}
+            onMouseEnter={() => onActiveChange(index)}
+            onClick={() => onPick(command)}
+          >
+            <code>/{command.name}</code>
+            <span>{command.description}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChatComposerInner<TAttachment>(
+  {
+    value,
+    defaultValue = "",
+    onValueChange,
+    commands = [],
+    toolbarActions = [],
+    variant = "docked",
+    commandMenuLabel = "命令（↑↓ 选择，回车填入）",
+    onCommandPick,
+    onSubmit,
+    tools,
+    textareaProps,
+    className,
+    ...props
+  }: ChatComposerProps<TAttachment>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const resolvedValue = value ?? internalValue;
+  const [dismissed, setDismissed] = useState(false);
+  const [active, setActive] = useState(0);
+  const query =
+    resolvedValue.startsWith("/") && !resolvedValue.includes("\n")
+      ? resolvedValue.slice(1).trim().toLowerCase()
+      : null;
+  const filtered = useMemo(() => {
+    if (query === null) return [];
+    if (!query) return [...commands];
+    return commands.filter(
+      (command) =>
+        command.name.toLowerCase().includes(query) ||
+        command.description.toLowerCase().includes(query),
+    );
+  }, [commands, query]);
+  const menuOpen = !dismissed && query !== null && filtered.length > 0;
+
+  useEffect(() => {
+    setDismissed(false);
+  }, [resolvedValue]);
+
+  useEffect(() => {
+    if (active >= filtered.length) setActive(0);
+  }, [active, filtered.length]);
+
+  const changeValue = (next: string) => {
+    if (value === undefined) setInternalValue(next);
+    onValueChange?.(next);
+  };
+
+  const pick = (command: ComposerCommand) => {
+    changeValue(command.prompt);
+    setDismissed(true);
+    onCommandPick?.(command);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    textareaProps?.onKeyDown?.(event);
+    if (event.defaultPrevented || !menuOpen) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setDismissed(true);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      setActive(
+        (current) => (current + delta + filtered.length) % filtered.length,
+      );
+      return;
+    }
+    if (
+      (event.key === "Enter" &&
+        !event.shiftKey &&
+        !event.nativeEvent.isComposing) ||
+      event.key === "Tab"
+    ) {
+      const command = filtered[active] ?? filtered[0];
+      if (command) {
+        event.preventDefault();
+        pick(command);
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn("sb-chat-composer", className)}
+      data-variant={variant}
+    >
+      <div className="sb-chat-composer__inner">
+        {menuOpen && (
+          <CommandMenu
+            commands={filtered}
+            active={active}
+            label={commandMenuLabel}
+            onActiveChange={setActive}
+            onPick={pick}
+          />
+        )}
+        <Composer
+          {...props}
+          value={resolvedValue}
+          onValueChange={changeValue}
+          onSubmit={async (message) => {
+            await onSubmit(message);
+            if (value === undefined) setInternalValue("");
+          }}
+          tools={
+            <>
+              {tools}
+              {toolbarActions.map((action) => (
+                <ToolbarAction key={action.id} action={action} />
+              ))}
+            </>
+          }
+          textareaProps={{
+            ...textareaProps,
+            onKeyDown: handleKeyDown,
+            onBlur: (event) => {
+              textareaProps?.onBlur?.(event);
+              setDismissed(true);
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export const ChatComposer = forwardRef(ChatComposerInner) as <TAttachment>(
+  props: ChatComposerProps<TAttachment> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+  },
+) => React.ReactElement;

package/src/composer/composer-attachments.tsx

@@ -0,0 +1,138 @@
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  Loader2Icon,
+  RotateCcwIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn } from "../internal/cn";
+import type { ComposerAttachmentView } from "./types";
+
+function formatSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function attachmentIcon(attachment: ComposerAttachmentView) {
+  const value = `${attachment.mediaType ?? ""} ${attachment.name}`;
+  if (/image/i.test(value)) return FileImageIcon;
+  if (/audio/i.test(value)) return FileAudioIcon;
+  if (/csv|sheet|excel/i.test(value)) return FileSpreadsheetIcon;
+  if (/code|javascript|typescript|json|html|xml/i.test(value)) return FileCodeIcon;
+  return FileTextIcon;
+}
+
+export const Attachments = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-attachments", className)} {...props} />
+));
+Attachments.displayName = "Attachments";
+
+export interface AttachmentPreviewProps extends HTMLAttributes<HTMLDivElement> {
+  attachment: ComposerAttachmentView;
+  actions?: ReactNode;
+}
+
+export const AttachmentPreview = forwardRef<
+  HTMLDivElement,
+  AttachmentPreviewProps
+>(({ attachment, actions, className, ...props }, ref) => {
+  const Icon = attachmentIcon(attachment);
+  const isImage =
+    attachment.mediaType?.startsWith("image/") && Boolean(attachment.url);
+  const subtitle =
+    attachment.status === "uploading"
+      ? "上传中…"
+      : attachment.status === "error"
+        ? "上传失败"
+        : [attachment.note, formatSize(attachment.size)].filter(Boolean).join(" · ");
+  return (
+    <div
+      ref={ref}
+      className={cn("sb-attachment", className)}
+      data-status={attachment.status}
+      {...props}
+    >
+      <span className="sb-attachment__preview">
+        {attachment.status === "uploading" ? (
+          <Loader2Icon size={18} className="sb-spin" />
+        ) : isImage ? (
+          <img src={attachment.url} alt="" />
+        ) : (
+          <Icon size={20} />
+        )}
+      </span>
+      <span className="sb-attachment__text">
+        <strong title={attachment.name}>{attachment.name}</strong>
+        <small>{subtitle}</small>
+      </span>
+      {actions && <span className="sb-attachment__actions">{actions}</span>}
+    </div>
+  );
+});
+AttachmentPreview.displayName = "AttachmentPreview";
+
+export const AttachmentRemove = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn("sb-attachment__button", className)}
+    aria-label="移除附件"
+    {...props}
+  >
+    {children ?? <XIcon size={13} />}
+  </button>
+));
+AttachmentRemove.displayName = "AttachmentRemove";
+
+export function AttachmentRetry(
+  props: ButtonHTMLAttributes<HTMLButtonElement>,
+) {
+  return (
+    <button
+      type="button"
+      className={cn("sb-attachment__button", props.className)}
+      aria-label="重试上传"
+      {...props}
+    >
+      <RotateCcwIcon size={13} />
+    </button>
+  );
+}
+
+export function AttachmentReorder({
+  direction,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  direction: "left" | "right";
+}) {
+  const Icon = direction === "left" ? ArrowLeftIcon : ArrowRightIcon;
+  return (
+    <button
+      type="button"
+      className={cn("sb-attachment__button", props.className)}
+      aria-label={direction === "left" ? "附件左移" : "附件右移"}
+      {...props}
+    >
+      <Icon size={13} />
+    </button>
+  );
+}

package/src/composer/composer-trigger-popover.tsx

@@ -0,0 +1,236 @@
+import {
+  ComposerPrimitive,
+  unstable_defaultDirectiveFormatter,
+  unstable_useTriggerPopoverScopeContext,
+  type Unstable_DirectiveFormatter,
+  type Unstable_TriggerItem,
+} from "@assistant-ui/react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  TerminalIcon,
+} from "lucide-react";
+import {
+  memo,
+  type ComponentPropsWithoutRef,
+  type FC,
+} from "react";
+import { cn } from "../internal/cn";
+
+type IconComponent = FC<{ className?: string }>;
+
+type DirectiveBehaviorProps = {
+  formatter?: Unstable_DirectiveFormatter;
+  onInserted?: (item: Unstable_TriggerItem) => void;
+};
+
+type ActionBehaviorProps = {
+  formatter?: Unstable_DirectiveFormatter;
+  onExecute: (item: Unstable_TriggerItem) => void;
+  removeOnExecute?: boolean;
+};
+
+type ComposerTriggerPopoverBaseProps = Omit<
+  ComponentPropsWithoutRef<
+    typeof ComposerPrimitive.Unstable_TriggerPopover
+  >,
+  "children"
+> & {
+  iconMap?: Record<string, IconComponent>;
+  fallbackIcon?: IconComponent;
+  backLabel?: string;
+  emptyCategoriesLabel?: string;
+  emptyItemsLabel?: string;
+  loadingLabel?: string;
+};
+
+export type ComposerTriggerPopoverProps =
+  ComposerTriggerPopoverBaseProps &
+    (
+      | {
+          directive: DirectiveBehaviorProps;
+          action?: never;
+        }
+      | {
+          action: ActionBehaviorProps;
+          directive?: never;
+        }
+    );
+
+function resolveIcon(
+  iconKey: string | undefined,
+  iconMap: Record<string, IconComponent> | undefined,
+  fallback: IconComponent,
+): IconComponent {
+  return (iconKey && iconMap?.[iconKey]) || fallback;
+}
+
+function Categories({
+  iconMap,
+  fallbackIcon,
+  emptyLabel,
+}: {
+  iconMap?: Record<string, IconComponent>;
+  fallbackIcon: IconComponent;
+  emptyLabel: string;
+}) {
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopoverCategories>
+      {(categories) => (
+        <div className="flex flex-col py-1">
+          {categories.map((category) => {
+            const Icon = resolveIcon(
+              category.id,
+              iconMap,
+              fallbackIcon,
+            );
+            return (
+              <ComposerPrimitive.Unstable_TriggerPopoverCategoryItem
+                key={category.id}
+                categoryId={category.id}
+                className="flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent"
+              >
+                <span className="flex items-center gap-2">
+                  <Icon className="size-4 text-muted-foreground" />
+                  {category.label}
+                </span>
+                <ChevronRightIcon className="size-4 text-muted-foreground" />
+              </ComposerPrimitive.Unstable_TriggerPopoverCategoryItem>
+            );
+          })}
+          {categories.length === 0 && (
+            <div className="px-3 py-2 text-sm text-muted-foreground">
+              {emptyLabel}
+            </div>
+          )}
+        </div>
+      )}
+    </ComposerPrimitive.Unstable_TriggerPopoverCategories>
+  );
+}
+
+function Items({
+  iconMap,
+  fallbackIcon,
+  backLabel,
+  emptyLabel,
+  loadingLabel,
+}: {
+  iconMap?: Record<string, IconComponent>;
+  fallbackIcon: IconComponent;
+  backLabel: string;
+  emptyLabel: string;
+  loadingLabel: string;
+}) {
+  const { isLoading } =
+    unstable_useTriggerPopoverScopeContext();
+
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopoverItems>
+      {(items) => (
+        <div className="flex flex-col">
+          <ComposerPrimitive.Unstable_TriggerPopoverBack className="flex cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground transition-colors hover:bg-accent">
+            <ChevronLeftIcon className="size-3.5" />
+            {backLabel}
+          </ComposerPrimitive.Unstable_TriggerPopoverBack>
+          <div className="py-1">
+            {items.map((item, index) => {
+              const iconKey =
+                typeof item.metadata?.icon === "string"
+                  ? item.metadata.icon
+                  : undefined;
+              const Icon = resolveIcon(
+                iconKey,
+                iconMap,
+                fallbackIcon,
+              );
+              return (
+                <ComposerPrimitive.Unstable_TriggerPopoverItem
+                  key={item.id}
+                  item={item}
+                  index={index}
+                  className="flex w-full cursor-pointer flex-col items-start gap-0.5 px-3 py-2 text-start outline-none transition-colors hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent"
+                >
+                  <span className="flex items-center gap-2 text-sm font-medium">
+                    <Icon className="size-3.5 text-primary" />
+                    {item.label}
+                  </span>
+                  {item.description && (
+                    <span className="ms-5.5 text-xs leading-tight text-muted-foreground">
+                      {item.description}
+                    </span>
+                  )}
+                </ComposerPrimitive.Unstable_TriggerPopoverItem>
+              );
+            })}
+            {items.length === 0 && (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                {isLoading ? loadingLabel : emptyLabel}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </ComposerPrimitive.Unstable_TriggerPopoverItems>
+  );
+}
+
+const ComposerTriggerPopoverImpl: FC<
+  ComposerTriggerPopoverProps
+> = ({
+  iconMap,
+  fallbackIcon = TerminalIcon,
+  backLabel = "Back",
+  emptyCategoriesLabel = "No items available",
+  emptyItemsLabel = "No matching items",
+  loadingLabel = "Loading…",
+  className,
+  directive,
+  action,
+  ...props
+}) => (
+  <ComposerPrimitive.Unstable_TriggerPopover
+    className={cn(
+      "absolute bottom-full start-0 z-50 mb-2 w-64 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+      className,
+    )}
+    {...props}
+  >
+    {directive ? (
+      <ComposerPrimitive.Unstable_TriggerPopover.Directive
+        formatter={
+          directive.formatter ??
+          unstable_defaultDirectiveFormatter
+        }
+        onInserted={directive.onInserted}
+      />
+    ) : (
+      <ComposerPrimitive.Unstable_TriggerPopover.Action
+        formatter={
+          action.formatter ?? unstable_defaultDirectiveFormatter
+        }
+        onExecute={action.onExecute}
+        removeOnExecute={action.removeOnExecute}
+      />
+    )}
+    <Categories
+      iconMap={iconMap}
+      fallbackIcon={fallbackIcon}
+      emptyLabel={emptyCategoriesLabel}
+    />
+    <Items
+      iconMap={iconMap}
+      fallbackIcon={fallbackIcon}
+      backLabel={backLabel}
+      emptyLabel={emptyItemsLabel}
+      loadingLabel={loadingLabel}
+    />
+  </ComposerPrimitive.Unstable_TriggerPopover>
+);
+
+ComposerTriggerPopoverImpl.displayName =
+  "ComposerTriggerPopover";
+
+export const ComposerTriggerPopover = memo(
+  ComposerTriggerPopoverImpl,
+) as FC<ComposerTriggerPopoverProps>;