@springbrand/message-panel 0.1.0 → 0.1.2

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

@@ -1,540 +0,0 @@
-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>) => {
-    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>) => {
-    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>) => {
-    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"
-    >
-      <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">
-              <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>
-  );
-}