50: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"] 51: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"] 52:T2a2b,'use client'; import { useRef, useState } from 'react'; import { ArrowUp, Check, ChevronDown, Paperclip, Square, X } from 'lucide-react'; import { cn } from '@/lib/utils'; import type { Attachment, ModelOption } from './types'; export type PromptComposerVariant = 'Default' | 'Minimal'; export interface PromptComposerProps { placeholder?: string; models?: ModelOption[]; defaultModelId?: string; attachments?: Attachment[]; onRemoveAttachment?: (id: string) => void; onAttach?: () => void; onSend?: (text: string, modelId?: string) => void; onStop?: () => void; isGenerating?: boolean; maxLength?: number; variant?: PromptComposerVariant; className?: string; } function formatSize(bytes: number) { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`; return `${(bytes / 1024 / 1024).toFixed(1)} MB`; } export function PromptComposer({ placeholder = 'Ask anything…', models = [], defaultModelId, attachments = [], onRemoveAttachment, onAttach, onSend, onStop, isGenerating = false, maxLength = 2000, variant = 'Default', className, }: PromptComposerProps) { const [value, setValue] = useState(''); const [modelId, setModelId] = useState(defaultModelId ?? models[0]?.id); const [pickerOpen, setPickerOpen] = useState(false); const textarea = useRef(null); const activeModel = models.find((model) => model.id === modelId); const canSend = value.trim().length > 0 && !isGenerating; const minimal = variant === 'Minimal'; function submit() { if (!canSend) return; onSend?.(value.trim(), modelId); setValue(''); if (textarea.current) textarea.current.style.height = 'auto'; } return (

{ event.preventDefault(); submit(); }} className={cn( 'w-full max-w-[560px] rounded-2xl border border-black/[0.08] bg-white shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-black/[0.18] focus-within:shadow-[0_0_0_3px_rgba(0,0,0,0.03)] dark:border-white/[0.09] dark:bg-[#0B0B0D] dark:focus-within:border-white/[0.24] dark:focus-within:shadow-[0_0_0_3px_rgba(255,255,255,0.04)]', className, )} > {attachments.length > 0 && (

{attachment.name} {formatSize(attachment.size)}

)}

{
            setValue(event.target.value);
            event.target.style.height = 'auto';
            event.target.style.height = `${Math.min(event.target.scrollHeight, 132)}px`;
          }}
          onKeyDown={(event) => {
            if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
              event.preventDefault();
              submit();
            }
          }}
          className="max-h-[132px] w-full resize-none bg-transparent text-[13.5px] leading-[1.6] text-neutral-900 outline-hidden placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-500"
        />
      </div>

<div className="flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1.5">
        <div className="flex min-w-0 items-center gap-1">
          {!minimal && (
            <button
              type="button"
              aria-label="Attach a file"
              onClick={onAttach}
              className="grid size-7 shrink-0 place-items-center rounded-lg text-neutral-400 transition-[color,background-color,transform] duration-150 hover:bg-black/[0.04] hover:text-neutral-700 active:scale-[0.94] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:text-neutral-500 dark:hover:bg-white/[0.06] dark:hover:text-neutral-200"
            >
              <Paperclip className="size-3.5" />
            </button>
          )}

{!minimal && models.length > 0 && (
            <div className="relative min-w-0">
              <button
                type="button"
                aria-haspopup="listbox"
                aria-expanded={pickerOpen}
                onClick={() => setPickerOpen((open) => !open)}
                className="flex min-w-0 items-center gap-1 rounded-lg px-2 py-1 font-mono text-[11px] text-neutral-500 transition-[color,background-color,transform] duration-150 hover:bg-black/[0.04] hover:text-neutral-800 active:scale-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-neutral-200"
              >
                <span className="truncate">{activeModel?.name ?? 'Model'}</span>
                <ChevronDown
                  className={cn(
                    'size-3 shrink-0 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
                    pickerOpen && 'rotate-180',
                  )}
                />
              </button>

{pickerOpen && (
                <ul
                  role="listbox"
                  aria-label="Model"
                  className="absolute bottom-full left-0 z-10 mb-1.5 w-56 rounded-xl border border-black/[0.08] bg-white p-1 shadow-lg dark:border-white/[0.1] dark:bg-neutral-900"
                >
                  {models.map((model) => {
                    const selected = model.id === modelId;
                    return (
                      <li key={model.id}>
                        <button
                          type="button"
                          role="option"
                          aria-selected={selected}
                          disabled={model.disabled}
                          onClick={() => {
                            setModelId(model.id);
                            setPickerOpen(false);
                          }}
                          className={cn(
                            'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors duration-150',
                            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400',
                            model.disabled
                              ? 'cursor-not-allowed opacity-40'
                              : 'hover:bg-black/[0.04] dark:hover:bg-white/[0.06]',
                          )}
                        >
                          <span className="min-w-0 flex-1">
                            <span className="block truncate text-[12.5px] font-medium text-neutral-800 dark:text-neutral-200">
                              {model.name}
                            </span>
                            {model.description && (
                              <span className="block truncate text-[11px] text-neutral-400 dark:text-neutral-500">
                                {model.description}
                              </span>
                            )}
                          </span>
                          {model.badge && !selected && (
                            <span className="shrink-0 rounded bg-black/[0.05] px-1 py-0.5 font-mono text-[9px] uppercase tracking-wide text-neutral-500 dark:bg-white/[0.08] dark:text-neutral-400">
                              {model.badge}
                            </span>
                          )}
                          {selected && <Check className="size-3.5 shrink-0 text-neutral-600 dark:text-neutral-300" />}
                        </button>
                      </li>
                    );
                  })}
                </ul>
              )}
            </div>
          )}
        </div>

<div className="flex shrink-0 items-center gap-2">
          {!minimal && (
            <span
              className={cn(
                'font-mono text-[10.5px] tabular-nums transition-colors duration-150',
                value.length > maxLength * 0.9
                  ? 'text-amber-600 dark:text-amber-400'
                  : 'text-neutral-300 dark:text-neutral-600',
              )}
            >
              {value.length}/{maxLength}
            </span>
          )}

<button
            type={isGenerating ? 'button' : 'submit'}
            onClick={isGenerating ? onStop : undefined}
            aria-label={isGenerating ? 'Stop generating' : 'Send prompt'}
            disabled={!isGenerating && !canSend}
            className="grid size-7 place-items-center rounded-full bg-neutral-900 text-white transition-[transform,opacity] duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.92] disabled:opacity-30 dark:bg-neutral-100 dark:text-neutral-900"
          >
            <span className="relative grid size-3.5 place-items-center">
              <ArrowUp
                className={cn(
                  'absolute size-3.5 transition-[opacity,filter] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
                  isGenerating ? 'opacity-0 blur-[2px]' : 'opacity-100 blur-0',
                )}
              />
              <Square
                className={cn(
                  'absolute size-2.5 fill-current transition-[opacity,filter] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
                  isGenerating ? 'opacity-100 blur-0' : 'opacity-0 blur-[2px]',
                )}
              />
            </span>
          </button>
        </div>
      </div>
    </form>
  );
}

export default PromptComposer;
53:T64c,export type MessageRole = 'user' | 'assistant' | 'system';

export type MessageState = 'streaming' | 'complete' | 'error';

export interface Attachment {
  id: string;
  name: string;
  size: number;
  type: string;
  url?: string;
  previewUrl?: string;
}

export interface Citation {
  id: string;
  index: number;
  url: string;
  title: string;
  snippet?: string;
  favicon?: string;
}

export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error' | 'cancelled';

export interface ToolCall {
  id: string;
  name: string;
  args?: Record<string, unknown>;
  result?: string;
  status: ToolCallStatus;
  startedAt?: number;
  completedAt?: number;
  children?: ToolCall[];
  parallel?: boolean;
}

export interface ReasoningStep {
  id: string;
  content: string;
}

export interface Reasoning {
  steps: ReasoningStep[];
  status: 'thinking' | 'complete';
  durationMs?: number;
}

export interface Message {
  id: string;
  role: MessageRole;
  content: string;
  createdAt?: number;
  state?: MessageState;
  attachments?: Attachment[];
  citations?: Citation[];
  toolCalls?: ToolCall[];
  reasoning?: Reasoning;
}

export interface Conversation {
  id: string;
  label: string;
}

export interface ModelOption {
  id: string;
  name: string;
  description?: string;
  badge?: string;
  disabled?: boolean;
}

export interface SuggestedPrompt {
  id: string;
  label: string;
  prompt?: string;
}

export type MessageFeedback = 'positive' | 'negative';

export interface UsageState {
  promptTokens: number;
  completionTokens: number;
  contextWindow: number;
  estimatedCostUsd?: number;
}
4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/ai-assistants/prompt-composer.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/ai-assistants/prompt-composer.tsx"},{"path":"components/spectrumui/blocks/ai-assistants/types.ts","content":"$53","type":"registry:file","target":"components/spectrumui/blocks/ai-assistants/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>