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

package/src/camel/camel-prompt-input.tsx

@@ -0,0 +1,547 @@
+import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  unstable_useSlashCommandAdapter,
+  unstable_useTriggerPopoverAriaProps,
+  unstable_useTriggerPopoverTriggers,
+  useExternalStoreRuntime,
+  type AssistantRuntime,
+  type ThreadMessage,
+} from "@assistant-ui/react";
+import {
+  ArrowUpIcon,
+  ClockIcon,
+  FileIcon,
+  FileTextIcon,
+  GlobeIcon,
+  ListChecksIcon,
+  Loader2Icon,
+  PlugIcon,
+  PlusIcon,
+  RotateCcwIcon,
+  SquareIcon,
+  TerminalIcon,
+  WrenchIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type DragEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import type { ComposerCommand } from "../composer/types";
+import { cn } from "../internal/cn";
+
+export interface CamelAttachmentView {
+  id: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+  url: string;
+  status: "uploading" | "ready" | "error";
+}
+
+const COMMAND_ICON_MAP = {
+  plan: ListChecksIcon,
+  research: GlobeIcon,
+  file: FileTextIcon,
+  time: ClockIcon,
+  tool: WrenchIcon,
+  mcp: PlugIcon,
+};
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: "sm" | "icon-xs" | "icon-sm";
+  variant?: "default" | "outline" | "ghost" | "destructive";
+};
+
+function Button({
+  className,
+  size = "sm",
+  variant = "default",
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center gap-1 rounded-md text-xs font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+        variant === "default" &&
+          "bg-primary text-primary-foreground hover:bg-primary/80",
+        variant === "outline" &&
+          "border border-border bg-background hover:bg-muted",
+        variant === "ghost" && "hover:bg-muted hover:text-foreground",
+        variant === "destructive" &&
+          "bg-destructive/10 text-destructive hover:bg-destructive/20",
+        size === "sm" && "h-7 px-2",
+        size === "icon-xs" && "size-6 p-0",
+        size === "icon-sm" && "size-8 p-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroup({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full min-w-0 flex-col items-center rounded-md border border-input bg-input/20 outline-none transition-colors dark:bg-input/30",
+        "has-[[data-camel-input=true]:focus-visible]:border-ring has-[[data-camel-input=true]:focus-visible]:ring-2 has-[[data-camel-input=true]:focus-visible]:ring-ring/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupAddon({
+  className,
+  align,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  align: "block-start" | "block-end";
+}) {
+  return (
+    <div
+      role="group"
+      data-align={align}
+      className={cn(
+        "flex h-auto w-full cursor-text items-center gap-1 px-2 text-xs font-medium text-muted-foreground",
+        align === "block-start"
+          ? "order-first justify-start pt-2"
+          : "order-last pb-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupButton(props: ButtonProps) {
+  return <Button {...props} />;
+}
+
+const InputGroupTextarea = forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    data-camel-input="true"
+    className={cn(
+      "w-full flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none outline-none ring-0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+
+interface CamelPromptInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  status: "ready" | "submitted" | "streaming" | "error";
+  attachments: readonly CamelAttachmentView[];
+  commands: readonly ComposerCommand[];
+  onFilesSelected?: (files: readonly File[]) => void;
+  onAttachmentRemove: (id: string) => void;
+  onAttachmentRetry: (id: string) => void;
+  tools?: ReactNode;
+  /** Compact delivery selector rendered immediately beside the submit button. */
+  submitControl?: ReactNode;
+  placeholder?: string;
+  /** Durable Turn activity can outlive the local chat stream status. */
+  turnActive?: boolean;
+  /** Blocks new submissions without disabling the stop control for an active Turn. */
+  submissionBlocked?: boolean;
+}
+
+function formatBytes(size?: number): string {
+  if (!size) return "";
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function AttachmentList({
+  attachments,
+  onRemove,
+  onRetry,
+}: {
+  attachments: readonly CamelAttachmentView[];
+  onRemove: (id: string) => void;
+  onRetry: (id: string) => void;
+}) {
+  return (
+    <div className="flex w-full flex-wrap gap-2">
+      {attachments.map((attachment) => (
+        <div
+          key={attachment.id}
+          className="group/attachment flex max-w-64 items-center gap-2 rounded-lg border border-border bg-muted/30 p-2"
+          data-attachment-status={attachment.status}
+        >
+          {attachment.mediaType?.startsWith("image/") ? (
+            <img
+              src={attachment.url}
+              alt=""
+              className="size-9 shrink-0 rounded-md object-cover"
+            />
+          ) : (
+            <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted">
+              <FileIcon className="size-4 text-muted-foreground" />
+            </span>
+          )}
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-xs text-foreground">
+              {attachment.filename ?? "Attachment"}
+            </div>
+            <div className="mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground">
+              {attachment.status === "uploading" && (
+                <Loader2Icon className="size-3 animate-spin" />
+              )}
+              <span>
+                {attachment.status === "uploading"
+                  ? "Uploading"
+                  : attachment.status === "error"
+                    ? "Upload failed"
+                    : formatBytes(attachment.size)}
+              </span>
+            </div>
+          </div>
+          {attachment.status === "error" && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => onRetry(attachment.id)}
+              aria-label="重试上传"
+            >
+              <RotateCcwIcon className="size-3" />
+            </Button>
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => onRemove(attachment.id)}
+            aria-label="移除附件"
+          >
+            <XIcon className="size-3" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CamelPromptInputContent({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  status,
+  attachments,
+  commands,
+  onFilesSelected,
+  onAttachmentRemove,
+  onAttachmentRetry,
+  tools,
+  submitControl,
+  placeholder = "Type a message...",
+  submissionBlocked = false,
+  turnActive,
+  runtime,
+}: CamelPromptInputProps & { runtime: AssistantRuntime }) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const isRunning = turnActive ??
+    (status === "submitted" || status === "streaming");
+  const hasUploading = attachments.some(
+    (attachment) => attachment.status === "uploading",
+  );
+  const hasReady = attachments.some(
+    (attachment) => attachment.status === "ready",
+  );
+  const slashCommands = useMemo(
+    () =>
+      commands.map((command) => ({
+        id: command.name,
+        description: command.description,
+        icon: command.icon,
+        execute: () => {
+          runtime.thread.composer.setText(command.prompt);
+          onChange(command.prompt);
+          requestAnimationFrame(() => textareaRef.current?.focus());
+        },
+      })),
+    [commands, onChange, runtime],
+  );
+  const slash = unstable_useSlashCommandAdapter({
+    commands: slashCommands,
+    removeOnExecute: true,
+    iconMap: COMMAND_ICON_MAP,
+    fallbackIcon: TerminalIcon,
+  });
+  const triggers = unstable_useTriggerPopoverTriggers();
+  const triggerAria = unstable_useTriggerPopoverAriaProps();
+
+  const setTriggerCursor = useCallback(
+    (position: number) => {
+      for (const trigger of triggers.values()) {
+        trigger.resource.setCursorPosition(position);
+      }
+    },
+    [triggers],
+  );
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 384)}px`;
+  }, [value]);
+
+  const submit = useCallback(() => {
+    if (isRunning && !value.trim() && !hasReady) {
+      onStop();
+      return;
+    }
+    if (submissionBlocked) return;
+    if (!hasUploading && (value.trim() || hasReady)) onSubmit();
+  }, [
+    hasReady,
+    hasUploading,
+    isRunning,
+    onStop,
+    onSubmit,
+    submissionBlocked,
+    value,
+  ]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    for (const trigger of triggers.values()) {
+      if (trigger.resource.handleKeyDown(event)) return;
+    }
+    if (
+      event.key === "Enter" &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const handlePaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    if (!onFilesSelected) return;
+    const files = Array.from(event.clipboardData.files);
+    if (files.length > 0) {
+      event.preventDefault();
+      onFilesSelected(files);
+    }
+  };
+
+  const handleFiles = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.currentTarget.files ?? []);
+    if (files.length > 0) onFilesSelected?.(files);
+    event.currentTarget.value = "";
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    if (!onFilesSelected) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const nextTarget = event.relatedTarget;
+    if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    if (!onFilesSelected) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragOver(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length > 0) onFilesSelected(files);
+  };
+
+  const handleFormSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    submit();
+  };
+  const showStopButton = isRunning && !value.trim() && !hasReady;
+  const submitDisabled =
+    hasUploading || (
+      !showStopButton &&
+      (submissionBlocked || (!value.trim() && !hasReady))
+    );
+
+  return (
+    <form
+      onSubmit={handleFormSubmit}
+      className="relative shrink-0"
+      data-camel-prompt-input=""
+      data-drop-scope="document"
+    >
+      {onFilesSelected && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleFiles}
+          className="hidden"
+          aria-hidden="true"
+        />
+      )}
+      <ComposerTriggerPopover
+        char="/"
+        {...slash}
+        aria-label="Commands"
+        backLabel="Back"
+        emptyItemsLabel="No matching commands"
+        className="w-full"
+      />
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={cn(
+          "relative rounded-2xl transition-all duration-200",
+          isDragOver && "ring-2 ring-primary ring-offset-2",
+        )}
+      >
+        {isDragOver && (
+          <div className="absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-primary/10">
+            <span className="text-sm font-medium text-primary">
+              Drop files here
+            </span>
+          </div>
+        )}
+        <InputGroup className="cursor-text rounded-2xl border-border bg-background shadow-sm transition-all duration-200 hover:shadow-md focus-within:border-ring focus-within:shadow-md">
+          {attachments.length > 0 && (
+            <InputGroupAddon
+              align="block-start"
+              className="border-b border-border"
+            >
+              <AttachmentList
+                attachments={attachments}
+                onRemove={onAttachmentRemove}
+                onRetry={onAttachmentRetry}
+              />
+            </InputGroupAddon>
+          )}
+          <InputGroupTextarea
+            ref={textareaRef}
+            value={value}
+            onChange={(event) => {
+              const next = event.currentTarget.value;
+              runtime.thread.composer.setText(next);
+              onChange(next);
+              setTriggerCursor(
+                event.currentTarget.selectionStart ?? next.length,
+              );
+            }}
+            onKeyDown={handleKeyDown}
+            onSelect={(event) =>
+              setTriggerCursor(
+                event.currentTarget.selectionStart ?? value.length,
+              )
+            }
+            onPaste={handlePaste}
+            placeholder={placeholder}
+            autoFocus
+            className="relative z-10 max-h-96 min-h-11 overflow-y-auto bg-transparent p-3.5 text-sm selection:bg-primary/30"
+            style={{ caretColor: "var(--foreground)" }}
+            {...triggerAria}
+          />
+          <InputGroupAddon
+            align="block-end"
+            className="justify-between px-3 pb-3"
+          >
+            <div className="flex items-center gap-1.5">
+              {onFilesSelected && (
+                <InputGroupButton
+                  type="button"
+                  size="icon-sm"
+                  variant="ghost"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+                  aria-label="Upload file"
+                >
+                  <PlusIcon className="size-4" />
+                </InputGroupButton>
+              )}
+              {tools}
+            </div>
+            <div className="flex items-center gap-1">
+              {!showStopButton && submitControl}
+              <InputGroupButton
+                type={showStopButton ? "button" : "submit"}
+                size="icon-sm"
+                variant="default"
+                disabled={submitDisabled}
+                onClick={showStopButton ? onStop : undefined}
+                className="rounded-full"
+                aria-label={showStopButton ? "停止" : "发送"}
+              >
+                {showStopButton ? (
+                  <SquareIcon className="size-3" />
+                ) : (
+                  <ArrowUpIcon className="size-4" />
+                )}
+              </InputGroupButton>
+            </div>
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
+    </form>
+  );
+}
+
+const EMPTY_MESSAGES: readonly ThreadMessage[] = [];
+
+export function CamelPromptInput(props: CamelPromptInputProps) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: EMPTY_MESSAGES,
+    onNew: async () => undefined,
+  });
+
+  useEffect(() => {
+    runtime.thread.composer.setText(props.value);
+  }, [props.value, runtime]);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+        <CamelPromptInputContent {...props} runtime={runtime} />
+      </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+    </AssistantRuntimeProvider>
+  );
+}