@springbrand/message-panel 0.1.0 → 0.1.2

package/src/composer/chat-composer.tsx

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

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

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