52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T33a4,"use client"; import SmoothButton from "@/components/smoothui/smooth-button"; import { cn } from "@/lib/utils"; import { ArrowUp, Paperclip, Square, X } from "lucide-react"; import { AnimatePresence, type MotionStyle, motion, type Transition, useReducedMotion, } from "motion/react"; import { type ChangeEvent, type KeyboardEvent, type ReactNode, useCallback, useLayoutEffect, useRef, useState, } from "react"; import { type AIState, getAIStateAccentColor, getAIStateMotion, } from "../ai-core"; const SUBMIT_ICON_SIZE = 17; const STOP_ICON_SIZE = 13; const MIN_ROWS = 1; const MAX_ROWS = 8; const COUNTER_VISIBLE_RATIO = 0.8; const SPRING_DEFAULT: Transition = { bounce: 0.1, duration: 0.25, type: "spring", }; const SPRING_SNAPPY: Transition = { bounce: 0, duration: 0.2, type: "spring", }; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const ATTACHMENT_STAGGER = 0.035; export type AIPromptAttachment = { id: string; /** Bytes. Rendered as a human-readable size when present. */ size?: number; name: string; }; export type AIPromptInputProps = { /** * Accessible name for the field. Without it the placeholder is the only thing * naming the textarea, which is fine on its own but not when the composer is * embedded in a larger surface that needs to say what the prompt is *for*. */ "aria-label"?: string; /** Files already attached to the draft. */ attachments?: AIPromptAttachment[]; /** Extra controls rendered on the left of the toolbar — model pickers etc. */ children?: ReactNode; className?: string; disabled?: boolean; /** Shows a counter once the draft passes 80% of the limit. */ maxLength?: number; onAttach?: () => void; onRemoveAttachment?: (id: string) => void; /** Called when the submit control is pressed while `state` is `streaming`. */ onStop?: () => void; onSubmit?: (value: string) => void; onValueChange?: (value: string) => void; placeholder?: string; /** Shared AI state. `streaming` turns submit into stop. */ state?: AIState; /** Controlled draft. Leave undefined to let the component own it. */ value?: string; }; const formatSize = (bytes: number): string => { const kilobyte = 1024; if (bytes < kilobyte) { return `${bytes} B`; } const megabyte = kilobyte * kilobyte; if (bytes < megabyte) { return `${Math.round(bytes / kilobyte)} KB`; } return `${(bytes / megabyte).toFixed(1)} MB`; }; /** * The prompt composer. * * Growth is animated with a layout spring rather than a CSS height transition, * so a pasted paragraph settles instead of snapping — and because the height is * measured from the textarea's own scroll height, the surrounding page never * reflows mid-keystroke. */ const AIPromptInput = ({ "aria-label": ariaLabel, attachments = [], children, className, disabled = false, maxLength, onAttach, onRemoveAttachment, onStop, onSubmit, onValueChange, placeholder = "Ask anything…", state = "idle", value, }: AIPromptInputProps) => { const shouldReduceMotion = useReducedMotion(); const stateMotion = getAIStateMotion(state); const accentColor = getAIStateAccentColor(state, "transparent"); const textareaRef = useRef(null); const [internalValue, setInternalValue] = useState(""); const [isFocused, setIsFocused] = useState(false); const isControlled = value !== undefined; const draft = isControlled ? value : internalValue; const isStreaming = state === "streaming"; const canSubmit = draft.trim().length > 0 && !disabled; const resize = useCallback(() => { const textarea = textareaRef.current; if (!textarea) { return; } // Collapse first, otherwise scrollHeight only ever grows. textarea.style.height = "auto"; const lineHeight = Number.parseFloat( getComputedStyle(textarea).lineHeight || "20" ); const maxHeight = lineHeight * MAX_ROWS; textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`; textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden"; }, []); useLayoutEffect(() => { // Collapsing on an empty draft matters after submit: the box has to return // to one row instead of holding the height of the message just sent. if (draft.length === 0 && textareaRef.current) { textareaRef.current.style.height = ""; } resize(); }, [draft, resize]); const handleChange = (event: ChangeEvent) => { const next = event.target.value; if (!isControlled) { setInternalValue(next); } onValueChange?.(next); }; const submit = () => { if (isStreaming) { onStop?.(); return; } if (!canSubmit) { return; } onSubmit?.(draft.trim()); if (!isControlled) { setInternalValue(""); } }; const handleKeyDown = (event: KeyboardEvent) => { // Enter sends, Shift+Enter breaks the line — the convention every chat UI // has trained users on. if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); submit(); } }; const counterVisible = maxLength !== undefined && draft.length >= maxLength * COUNTER_VISIBLE_RATIO; const overLimit = maxLength !== undefined && draft.length > maxLength; return ( {attachments.length > 0 && ( {attachments.map((attachment, index) => ( {attachment.name} {attachment.size !== undefined && ( {formatSize(attachment.size)} )} {onRemoveAttachment ? ( onRemoveAttachment(attachment.id)} size="icon-sm" type="button" variant="ghost" > ) : null} ))} )}

setIsFocused(false)}
        onChange={handleChange}
        onFocus={() => setIsFocused(true)}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        ref={textareaRef}
        rows={MIN_ROWS}
        value={draft}
      />

<div className="flex items-center justify-between gap-2 px-2 pb-2">
        <div className="flex min-w-0 items-center gap-1">
          {onAttach ? (
            <SmoothButton
              aria-label="Attach a file"
              className="text-muted-foreground"
              disabled={disabled}
              onClick={onAttach}
              size="icon-sm"
              type="button"
              variant="ghost"
            >
              <Paperclip aria-hidden="true" size={16} />
            </SmoothButton>
          ) : null}
          {children}
        </div>

<div className="flex items-center gap-2">
          <AnimatePresence initial={false}>
            {counterVisible ? (
              <motion.span
                animate={{ opacity: 1, y: 0 }}
                className={cn(
                  "text-xs tabular-nums",
                  overLimit ? "text-destructive" : "text-muted-foreground"
                )}
                exit={
                  shouldReduceMotion
                    ? { opacity: 0, transition: { duration: 0 } }
                    : { opacity: 0, y: 4 }
                }
                initial={
                  shouldReduceMotion
                    ? { opacity: 1, y: 0 }
                    : { opacity: 0, y: 4 }
                }
                transition={
                  shouldReduceMotion ? { duration: 0 } : SPRING_SNAPPY
                }
              >
                {draft.length}/{maxLength}
              </motion.span>
            ) : null}
          </AnimatePresence>

<AIPromptSubmit
            disabled={disabled || !(canSubmit || isStreaming)}
            isStreaming={isStreaming}
            onClick={submit}
            shouldReduceMotion={Boolean(shouldReduceMotion)}
            speed={stateMotion.speed}
          />
        </div>
      </div>
    </motion.div>
  );
};

type AIPromptSubmitProps = {
  disabled: boolean;
  isStreaming: boolean;
  onClick: () => void;
  shouldReduceMotion: boolean;
  speed: number;
};

const AIPromptSubmit = ({
  disabled,
  isStreaming,
  onClick,
  shouldReduceMotion,
  speed,
}: AIPromptSubmitProps) => (
  <motion.button
    aria-label={isStreaming ? "Stop generating" : "Send message"}
    className={cn(
      "flex size-9 items-center justify-center rounded-xl",
      disabled
        ? "bg-muted text-muted-foreground"
        : "bg-foreground text-background"
    )}
    disabled={disabled}
    onClick={onClick}
    transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}
    type="button"
    whileHover={disabled || shouldReduceMotion ? undefined : { scale: 1.05 }}
    whileTap={disabled || shouldReduceMotion ? undefined : { scale: 0.95 }}
  >
    {/* Real lucide glyphs, swapped rather than morphed.
        An earlier version interpolated one hand-authored `d` into another, which
        bought a nice fold at the cost of not being a lucide icon at all — and a
        filled wedge reads as "play", not "send". A thin stroked arrow is the
        convention, and lucide's own geometry is what the rest of the library
        uses. The swap is scale-and-fade so it still reads as one control. */}
    <AnimatePresence initial={false} mode="popLayout">
      <motion.span
        animate={{ opacity: 1, scale: 1 }}
        className="flex items-center justify-center"
        exit={
          shouldReduceMotion
            ? { opacity: 0, transition: { duration: 0 } }
            : { opacity: 0, scale: 0.6 }
        }
        initial={
          shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.6 }
        }
        key={isStreaming ? "stop" : "send"}
        transition={
          shouldReduceMotion
            ? { duration: 0 }
            : { duration: 0.18 / speed, ease: EASE_OUT }
        }
      >
        {isStreaming ? (
          <Square
            aria-hidden="true"
            className="fill-current"
            size={STOP_ICON_SIZE}
            strokeWidth={0}
          />
        ) : (
          <ArrowUp aria-hidden="true" size={SUBMIT_ICON_SIZE} />
        )}
      </motion.span>
    </AnimatePresence>
  </motion.button>
);

export default AIPromptInput;
51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/ai-core.json","https://smoothui.dev/r/smooth-button.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/ai-prompt-input/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>