4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T1896,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useRef, useState } from "react"; export type ComposerSource = { id: string; label: string; type: "file" | "web" | "app"; connected?: boolean; }; export type PromptComposerProps = { sources?: readonly ComposerSource[]; model?: string; placeholder?: string; sendLabel?: string; addSourcesLabel?: string; dictationLabel?: string; onSubmit?: (prompt: string, sourceIds: string[]) => void; className?: string; }; export function PromptComposer({ sources = [], model = "Agent 5", placeholder = "Ask the agent to…", sendLabel = "Send", addSourcesLabel = "Add sources", dictationLabel = "Start dictation", onSubmit, className = "", }: PromptComposerProps) { const [prompt, setPrompt] = useState(""); const [menu, setMenu] = useState(false); const [selected, setSelected] = useState([]); const [sent, setSent] = useState(false); const area = useRef(null); const sentTimer = useRef(null); const reduced = useReducedMotion(); useEffect(() => () => { if (sentTimer.current !== null) window.clearTimeout(sentTimer.current); }, []); const send = () => { const value = prompt.trim(); if (!value) return; onSubmit?.(value, selected); setPrompt(""); setSent(true); if (sentTimer.current !== null) window.clearTimeout(sentTimer.current); sentTimer.current = window.setTimeout(() => setSent(false), 1200); }; return (

{selected.length ? (

{selected.map((id) => { const source = sources.find((item) => item.id === id); return ( ); })}

) : null}

setPrompt(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            send();
          }
        }}
        placeholder={placeholder}
        aria-label={placeholder}
        className="min-h-20 w-full resize-none bg-transparent px-3 py-3 text-[14px] leading-6 outline-none placeholder:text-neutral-400"
      />
      <div className="flex items-center gap-1 border-t border-neutral-100 px-1 pt-2 dark:border-white/8">
        <button
          type="button"
          aria-expanded={menu}
          aria-label={addSourcesLabel}
          onClick={() => setMenu((value) => !value)}
          className="grid size-11 place-items-center rounded-lg text-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-white/5"
        >
          ＋
        </button>
        <button
          type="button"
          className="min-h-11 rounded-lg px-3 text-[10px] text-neutral-500 hover:bg-neutral-100 dark:hover:bg-white/5"
        >
          {model}⌄
        </button>
        <button
          type="button"
          aria-label={dictationLabel}
          className="ml-auto grid size-11 place-items-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-white/5"
        >
          ◉
        </button>
        <motion.button
          type="button"
          aria-label={sendLabel}
          disabled={!prompt.trim()}
          onClick={send}
          whileTap={reduced ? undefined : { scale: 0.94 }}
          className={`grid size-11 place-items-center rounded-lg text-white outline-none focus-visible:ring-2 focus-visible:ring-blue-600 disabled:opacity-30 ${sent ? "bg-emerald-600" : "bg-neutral-950 dark:bg-neutral-50 dark:text-neutral-950"}`}
        >
          {sent ? "✓" : "↑"}
        </motion.button>
      </div>
      <AnimatePresence>
        {menu ? (
          <motion.div
            initial={reduced ? false : { opacity: 0, y: 6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.98 }}
            className="absolute bottom-14 left-3 z-20 w-[min(300px,calc(100%-24px))] rounded-[10px] border border-neutral-200 bg-white p-2 shadow-[0_8px_24px_rgba(0,0,0,.14)] dark:border-white/10 dark:bg-[#202020]"
          >
            {sources.map((source) => (
              <button
                key={source.id}
                type="button"
                onClick={() =>
                  setSelected((current) =>
                    current.includes(source.id)
                      ? current.filter((id) => id !== source.id)
                      : [...current, source.id],
                  )
                }
                className="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 text-left hover:bg-neutral-50 dark:hover:bg-white/5"
              >
                <span className="grid size-7 place-items-center rounded-lg bg-neutral-100 text-[9px] uppercase text-neutral-500 dark:bg-white/5">
                  {source.type.slice(0, 1)}
                </span>
                <span className="text-[11px] font-medium">{source.label}</span>
                <span
                  className={`ml-auto size-2 rounded-full ${selected.includes(source.id) ? "bg-neutral-950 dark:bg-neutral-50" : source.connected ? "bg-emerald-600" : "bg-neutral-200"}`}
                />
              </button>
            ))}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </section>
  );
}
4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/prompt-composer.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/prompt-composer","itemId":"@motion-lexicon/prompt-composer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/prompt-composer.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/prompt-composer.tsx"}]}]]}],"$L53"]}]
</article></body></html>

Agent Prompt Composer

Installation

Files

components

Styles