51: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"] 52: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"] 53:Tce9,.cr-prompt { display: flex; flex-direction: column; gap: var(--cr-space-2); box-sizing: border-box; padding: var(--cr-space-3); border-radius: var(--cr-radius-2xl); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-prompt:focus-within { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-prompt__attachments { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin: 0; padding: 0; list-style: none; } .cr-prompt__attachment { display: inline-flex; align-items: center; gap: var(--cr-space-2); padding: 6px 6px 6px 10px; border-radius: var(--cr-radius-md); background: var(--cr-color-bg-subtle); font-size: var(--cr-font-size-sm); } .cr-prompt__attachment-icon { display: flex; color: var(--cr-color-text-muted); } .cr-prompt__attachment-name { font-weight: var(--cr-font-weight-semibold); } .cr-prompt__attachment-detail { color: var(--cr-color-text-muted); } .cr-prompt__field { box-sizing: border-box; width: 100%; min-height: 44px; max-height: 200px; padding: var(--cr-space-2); border: 0; outline: none; background: none; color: inherit; font: inherit; font-size: var(--cr-font-size-md); line-height: 1.5; resize: none; } .cr-prompt__field::placeholder { color: var(--cr-color-text-muted); opacity: 1; } .cr-prompt__bar { display: flex; align-items: center; gap: var(--cr-space-2); } .cr-prompt__hint { margin-inline-start: auto; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-prompt__hint kbd { font-family: var(--cr-font-family-mono); } .cr-prompt__attach, .cr-prompt__remove, .cr-prompt__go { display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--cr-radius-full); cursor: pointer; } .cr-prompt__attach { width: 32px; height: 32px; background: var(--cr-color-bg-subtle); color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-lg); } .cr-prompt__remove { width: 24px; height: 24px; background: none; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-prompt__attach:hover, .cr-prompt__remove:hover { color: var(--cr-color-text-default); } .cr-prompt__go { width: var(--cr-control-height-sm); height: var(--cr-control-height-sm); font-size: var(--cr-font-size-lg); } /* With no hint, the button still sits at the end. */ .cr-prompt__bar > .cr-prompt__go:not(.cr-prompt__hint + *) { margin-inline-start: auto; } .cr-prompt__go[data-kind='send'] { background: var(--cr-color-accent-bg); box-shadow: var(--cr-shadow-accent); color: var(--cr-color-accent-fg); } .cr-prompt__go[data-kind='send']:hover { background: var(--cr-color-accent-bg-hover); } .cr-prompt__go[data-kind='send']:disabled { background: var(--cr-color-bg-subtle); box-shadow: none; color: var(--cr-color-text-muted); cursor: not-allowed; } .cr-prompt__go[data-kind='stop'] { background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); } .cr-prompt__attach:focus-visible, .cr-prompt__remove:focus-visible, .cr-prompt__go:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } 54:T15f6,'use client'; import { useEffect, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { CrossIcon, FileIcon, ImageIcon, PlusIcon, SendIcon, StopIcon } from '@/lib/creance/icons'; import './PromptInput.css'; export interface PromptAttachment { id: string; name: string; /** Shown after the name, for example "48 KB". */ detail?: string; kind?: 'file' | 'image'; } export interface PromptInputProps { /** Accessible name of the form and its text field, for example "Message Deploy Fixer". */ label: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called with the trimmed text on Enter or Send. An uncontrolled field then clears. */ onSubmit?: (value: string) => void; /** `working` turns Send into Stop. Default `ready`. */ status?: 'ready' | 'working'; onStop?: () => void; placeholder?: string; disabled?: boolean; /** Files already attached, shown above the text. */ attachments?: PromptAttachment[]; onRemoveAttachment?: (id: string) => void; /** Shows the attach button. Called with the files the person picks. */ onAttach?: (files: File[]) => void; /** File types the picker offers, as for ``. */ accept?: string; /** Beside the attach button: a ModelPicker, toggles. */ tools?: ReactNode; /** Text before the button. Default is the keyboard hint. Pass `null` for none. */ hint?: ReactNode; sendLabel?: string; stopLabel?: string; attachLabel?: string; className?: string; } const defaultHint = ( <> Enter to send · Shift+Enter for a new line ); /** * Where you write to an agent. Enter sends and Shift+Enter starts a new line. Send is the one blue button; * while the agent works it becomes Stop. */ export function PromptInput({ label, value: controlled, defaultValue = '', onValueChange, onSubmit, status = 'ready', onStop, placeholder, disabled, attachments, onRemoveAttachment, onAttach, accept, tools, hint = defaultHint, sendLabel = 'Send', stopLabel = 'Stop', attachLabel = 'Attach a file', className, }: PromptInputProps) { const [own, setOwn] = useState(defaultValue); const value = controlled ?? own; const field = useRef(null); const picker = useRef(null); const working = status === 'working'; const empty = value.trim() === ''; // Grow with the text, up to the limit in the stylesheet. useEffect(() => { const el = field.current; if (!el) return; el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px`; }, [value]); function change(next: string) { setOwn(next); onValueChange?.(next); } function submit() { if (empty || disabled) return; onSubmit?.(value.trim()); change(''); } function onKeyDown(e: KeyboardEvent) { // Enter while composing text in an input method confirms the composition, not the message. if (e.key !== 'Enter' || e.shiftKey || e.nativeEvent.isComposing) return; e.preventDefault(); submit(); } function onPick(e: ChangeEvent) { const files = [...(e.target.files ?? [])]; if (files.length) onAttach?.(files); e.target.value = ''; } return (

{ e.preventDefault(); submit(); }} > {attachments && attachments.length > 0 && (

{a.kind === 'image' ? : } {a.name} {a.detail && {a.detail}} {onRemoveAttachment && ( )}

)}

change(e.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="cr-prompt__bar">
        {onAttach && (
          <>
            <input ref={picker} type="file" hidden multiple accept={accept} tabIndex={-1} onChange={onPick} />
            <button type="button" className="cr-prompt__attach" aria-label={attachLabel} disabled={disabled} onClick={() => picker.current?.click()}>
              <PlusIcon />
            </button>
          </>
        )}
        {tools}
        {hint !== null && <span className="cr-prompt__hint">{hint}</span>}
        {working ? (
          <button type="button" className="cr-prompt__go" data-kind="stop" aria-label={stopLabel} onClick={onStop}>
            <StopIcon />
          </button>
        ) : (
          <button type="submit" className="cr-prompt__go" data-kind="send" aria-label={sendLabel} disabled={empty || disabled}>
            <SendIcon />
          </button>
        )}
      </div>
    </form>
  );
}
50:["$","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":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"prompt-input/PromptInput.css","content":"$53","type":"registry:file","target":"@components/creance/prompt-input/PromptInput.css"},{"path":"prompt-input/PromptInput.tsx","content":"$54","type":"registry:ui","target":"@components/creance/prompt-input/PromptInput.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>