4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T6f79,"use client"; import { ArrowUp, Check, ChevronDown, type LucideIcon, MoreHorizontal } from "lucide-react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react"; import { IconEarthFillDuo18, IconLinkFillDuo18 } from "nucleo-ui-essential-fill-duo-18"; import { type FormEvent, type KeyboardEvent, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const getMessageSurfaceLayoutId = (id: string) => `chat-message-surface-${id}`; const sharedLayoutTransition = { type: "spring" as const, duration: 0.3, bounce: 0, }; const easeOut = [0.23, 1, 0.32, 1] as const; export type AiChatModel = { id: string; name: string; description: string; capability: string; icon?: LucideIcon; iconClassName?: string; }; const DEFAULT_MODELS: AiChatModel[] = [ { id: "nova", name: "Nova", description: "Balanced for everyday ideas", capability: "Balanced", }, { id: "atlas", name: "Atlas", description: "Plans and complex reasoning", capability: "Reasoning", }, { id: "swift", name: "Swift", description: "Quick drafts and edits", capability: "Fast", }, ]; export type AiChatMessage = { id: string; text: string; }; export type AiChatAction = { id: string; label: string; icon: ReactNode; onClick?: () => void; disabled?: boolean; }; export type AiChatBoxLabels = { empty: ReactNode; input: string; inputAriaLabel: string; send: string; modelPicker: string; }; export type AiChatBoxProps = { className?: string; models?: AiChatModel[]; messages?: AiChatMessage[]; defaultMessages?: AiChatMessage[]; onMessagesChange?: (messages: AiChatMessage[]) => void; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; selectedModelId?: string; defaultSelectedModelId?: string; onSelectedModelChange?: (modelId: string) => void; onSend?: (message: AiChatMessage, model?: AiChatModel) => void | Promise; actions?: AiChatAction[]; labels?: Partial; renderMessage?: (message: AiChatMessage) => ReactNode; emptyState?: ReactNode; disabled?: boolean; isSending?: boolean; maxLength?: number; submitOnEnter?: boolean; }; const DEFAULT_LABELS: AiChatBoxLabels = { empty: "Let's Begin", input: "Ask anything", inputAriaLabel: "Message input", send: "Send message", modelPicker: "Choose a model", }; function ComposerIconButton({ children, label, onClick, disabled, }: { children: ReactNode; label: string; onClick?: () => void; disabled?: boolean; }) { return ( ); } function MessageSurface({ id, text, isMorphing, onSurfaceAnimationComplete, className, children, }: { id: string; text: string; isMorphing: boolean; onSurfaceAnimationComplete?: () => void; className?: string; children?: ReactNode; }) { return ( ); } function MessageBubble({ id, text, isMorphing, onSurfaceAnimationComplete, renderMessage, }: { id: string; text: string; isMorphing: boolean; onSurfaceAnimationComplete?: () => void; renderMessage?: (message: AiChatMessage) => ReactNode; }) { return (

{renderMessage?.({ id, text })}

); } function ModelPickerPanel({ panelId, selectorId, selectedModelId, motionEnabled, onSelect, onClose, onKeyboardInteraction, onReturnFocus, models, ariaLabel, }: { panelId: string; selectorId: string; selectedModelId: string; motionEnabled: boolean; onSelect: (modelId: string) => void; onClose: () => void; onKeyboardInteraction: () => void; onReturnFocus: () => void; models: AiChatModel[]; ariaLabel: string; }) { const optionRefs = useRef>([]); const selectedIndex = Math.max( 0, models.findIndex((model) => model.id === selectedModelId), ); const [focusedModelId, setFocusedModelId] = useState(selectedModelId); const [cursorMotionEnabled, setCursorMotionEnabled] = useState(motionEnabled); useEffect(() => { optionRefs.current[selectedIndex]?.focus(); }, [selectedIndex]); const selectAndFocusOption = (index: number) => { const normalizedIndex = (index + models.length) % models.length; const nextModel = models[normalizedIndex]; setFocusedModelId(nextModel.id); onSelect(nextModel.id); optionRefs.current[normalizedIndex]?.focus(); }; const handleKeyDown = (event: KeyboardEvent) => { const focusedIndex = Math.max( 0, models.findIndex((model) => model.id === focusedModelId), ); setCursorMotionEnabled(false); onKeyboardInteraction(); if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); selectAndFocusOption(focusedIndex + 1); } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); selectAndFocusOption(focusedIndex - 1); } else if (event.key === "Home") { event.preventDefault(); selectAndFocusOption(0); } else if (event.key === "End") { event.preventDefault(); selectAndFocusOption(models.length - 1); } else if (event.key === "Escape") { event.preventDefault(); onClose(); requestAnimationFrame(onReturnFocus); } else if (event.key === "Enter") { event.preventDefault(); onSelect(focusedModelId); onClose(); requestAnimationFrame(onReturnFocus); } }; return ( setCursorMotionEnabled(true)} initial={motionEnabled ? { opacity: 0, transform: "translateY(7px) scale(0.98)" } : false} animate={{ opacity: 1, transform: "translateY(0px) scale(1)" }} exit={ motionEnabled ? { opacity: 0, transform: "translateY(4px) scale(0.985)" } : { opacity: 0 } } transition={{ duration: motionEnabled ? 0.18 : 0, ease: easeOut }} className="relative z-10 grid grid-cols-3 gap-1 pt-2 dark:border-neutral-700/70 bg-neutral-100 dark:bg-neutral-900 rounded-[1rem] px-2 pb-2 text-center text-xs font-medium text-neutral-900 dark:text-neutral-100" > {models.map((model, index) => { const isFocused = focusedModelId === model.id; const isSelected = selectedModelId === model.id; return ( setFocusedModelId(model.id)} onPointerUp={() => { onSelect(model.id); onClose(); requestAnimationFrame(onReturnFocus); }} initial={motionEnabled ? { opacity: 0, transform: "translateY(5px)" } : false} animate={{ opacity: 1, transform: "translateY(0px)" }} transition={{ duration: motionEnabled ? 0.16 : 0, delay: motionEnabled ? index * 0.035 : 0, ease: easeOut, }} className="relative flex h-[72px] min-w-0 cursor-pointer flex-col items-center justify-center gap-1 rounded-md px-1 outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-sky-500/40" > { optionRefs.current[index] = element; }} type="radio" name={`${selectorId}-model`} value={model.id} checked={isSelected} aria-label={`${model.name}: ${model.description}`} onFocus={() => setFocusedModelId(model.id)} onChange={() => onSelect(model.id)} className="sr-only" /> {isFocused && ( )}

{/* */} {model.name} {isSelected && ( )}

{model.capability} ); })} ); } export function AiChatBox({ className, models = DEFAULT_MODELS, messages: controlledMessages, defaultMessages = [], onMessagesChange, value, defaultValue = "", onValueChange, selectedModelId: controlledSelectedModelId, defaultSelectedModelId, onSelectedModelChange, onSend, actions, labels: labelOverrides, renderMessage, emptyState, disabled = false, isSending = false, maxLength, submitOnEnter = true, }: AiChatBoxProps) { const baseId = useId(); const modelSelectorId = useId(); const messageIdRef = useRef(1); const modelKeyboardToggleRef = useRef(false); const modelTriggerRef = useRef(null); const previousMessageCountRef = useRef(0); const scrollRef = useRef(null); const shouldStickToBottomRef = useRef(true); const textareaRef = useRef(null); const [internalMessages, setInternalMessages] = useState(defaultMessages); const [internalInput, setInternalInput] = useState(defaultValue); const [isModelPickerOpen, setIsModelPickerOpen] = useState(false); const [internalSelectedModelId, setInternalSelectedModelId] = useState( defaultSelectedModelId ?? models[0]?.id ?? "", ); const [modelMotionEnabled, setModelMotionEnabled] = useState(true); const [composerSurfaceId, setComposerSurfaceId] = useState( () => `${baseId}-msg-1`, ); const [departingMessage, setDepartingMessage] = useState(null); const [morphingMessageId, setMorphingMessageId] = useState(null); const messages = controlledMessages ?? internalMessages; const input = value ?? internalInput; const selectedModelId = controlledSelectedModelId ?? internalSelectedModelId; const labels = { ...DEFAULT_LABELS, ...labelOverrides }; const hasMessages = messages.length > 0; const trimmedInput = input.trim(); const canSend = trimmedInput.length > 0 && !disabled && !isSending; const selectedModel = models.find((model) => model.id === selectedModelId) ?? models[0]; const modelPanelId = `${modelSelectorId}-options`; const composerActions: AiChatAction[] = actions ?? [ { id: "attach", label: "Attach file", icon: , }, { id: "search", label: "Search web", icon: , }, { id: "more", label: "More options", icon: , }, ]; const updateInput = useCallback( (nextValue: string) => { if (value === undefined) setInternalInput(nextValue); onValueChange?.(nextValue); }, [onValueChange, value], ); const updateSelectedModel = useCallback( (modelId: string) => { if (controlledSelectedModelId === undefined) { setInternalSelectedModelId(modelId); } onSelectedModelChange?.(modelId); }, [controlledSelectedModelId, onSelectedModelChange], ); const updateMessages = useCallback( (nextMessages: AiChatMessage[]) => { if (controlledMessages === undefined) setInternalMessages(nextMessages); onMessagesChange?.(nextMessages); }, [controlledMessages, onMessagesChange], ); const scrollToBottom = useCallback(() => { const el = scrollRef.current; if (!el) return; shouldStickToBottomRef.current = true; el.scrollTop = el.scrollHeight; }, []); const handleMessagesScroll = useCallback(() => { const el = scrollRef.current; if (!el) return; const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight; shouldStickToBottomRef.current = distanceFromBottom <= 24; }, []); useLayoutEffect(() => { const messageCount = messages.length; if (messageCount !== previousMessageCountRef.current) { scrollToBottom(); previousMessageCountRef.current = messageCount; } }, [messages.length, scrollToBottom]); const resizeTextarea = useCallback(() => { const textarea = textareaRef.current; if (!textarea) return; textarea.style.height = "auto"; textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`; }, []); const nextComposerMessageId = useCallback(() => { messageIdRef.current += 1; return `${baseId}-msg-${messageIdRef.current}`; }, [baseId]); const sendMessage = useCallback( (text: string) => { const trimmed = text.trim(); if (!trimmed) return; scrollToBottom(); const id = composerSurfaceId ?? nextComposerMessageId(); const nextSurfaceId = nextComposerMessageId(); setDepartingMessage({ id, text: trimmed }); setMorphingMessageId(id); updateInput(""); requestAnimationFrame(() => { requestAnimationFrame(() => { const message = { id, text: trimmed }; updateMessages([...messages, message]); void onSend?.(message, selectedModel); setDepartingMessage(null); setComposerSurfaceId(nextSurfaceId); requestAnimationFrame(() => { resizeTextarea(); }); }); }); }, [ composerSurfaceId, messages, nextComposerMessageId, onSend, resizeTextarea, scrollToBottom, selectedModel, updateInput, updateMessages, ], ); const handleSubmit = (event: FormEvent) => { event.preventDefault(); sendMessage(input); }; const handleKeyDown = (event: KeyboardEvent) => { if (submitOnEnter && event.key === "Enter" && !event.shiftKey) { event.preventDefault(); sendMessage(input); } }; const handleSurfaceAnimationComplete = useCallback(() => { setMorphingMessageId(null); scrollToBottom(); }, [scrollToBottom]); return (

{!hasMessages && ( {emptyState ?? labels.empty} )}

{messages.map((message) => ( ))}

{departingMessage ? ( ) : composerSurfaceId ? ( ) : null}

{
                      updateInput(e.target.value);
                      requestAnimationFrame(resizeTextarea);
                    }}
                    onFocus={() => setIsModelPickerOpen(false)}
                    onKeyDown={handleKeyDown}
                    placeholder={labels.input}
                    disabled={disabled || isSending}
                    maxLength={maxLength}
                    rows={1}
                    className="min-h-[1.5rem] w-full resize-none border-0 bg-transparent px-1 text-sm leading-relaxed text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-500"
                    aria-label={labels.inputAriaLabel}
                  />
                </motion.div>

<AnimatePresence initial={false} mode="popLayout">
                  {isModelPickerOpen && models.length > 0 && (
                    <ModelPickerPanel
                      key="model-picker"
                      panelId={modelPanelId}
                      selectorId={modelSelectorId}
                      selectedModelId={selectedModelId}
                      models={models}
                      ariaLabel={labels.modelPicker}
                      motionEnabled={modelMotionEnabled}
                      onSelect={updateSelectedModel}
                      onClose={() => setIsModelPickerOpen(false)}
                      onKeyboardInteraction={() => setModelMotionEnabled(false)}
                      onReturnFocus={() => modelTriggerRef.current?.focus()}
                    />
                  )}
                </AnimatePresence>

<motion.div
                  layout="position"
                  className="relative z-10 flex items-center justify-between gap-2"
                >
                  <div className="flex items-center gap-1">
                    {selectedModel ? (
                      <button
                        ref={modelTriggerRef}
                        type="button"
                        aria-label={`Model: ${selectedModel?.name ?? "Unavailable"}`}
                        aria-haspopup="dialog"
                        aria-expanded={isModelPickerOpen}
                        aria-controls={modelPanelId}
                        onPointerDown={() => setModelMotionEnabled(true)}
                        onKeyDown={(event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault();
                            modelKeyboardToggleRef.current = true;
                            setModelMotionEnabled(false);
                            setIsModelPickerOpen((isOpen) => !isOpen);
                            requestAnimationFrame(() => {
                              modelKeyboardToggleRef.current = false;
                            });
                          } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
                            event.preventDefault();
                            setModelMotionEnabled(false);
                            setIsModelPickerOpen(true);
                          } else if (event.key === "Escape") {
                            event.preventDefault();
                            setModelMotionEnabled(false);
                            setIsModelPickerOpen(false);
                          }
                        }}
                        onClick={() => {
                          if (modelKeyboardToggleRef.current) return;
                          setIsModelPickerOpen((isOpen) => !isOpen);
                        }}
                        className={cn(
                          "flex h-8 min-w-[96px] items-center gap-1.5 rounded-lg bg-neutral-100 px-2 text-left text-xs font-medium text-neutral-700 outline-none transition-[color,background-color,transform] duration-150 hover:bg-neutral-200/80 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
                          modelMotionEnabled && "active:scale-[0.97]",
                        )}
                      >
                        <span className="relative h-4 min-w-0 flex-1 overflow-hidden">
                          <AnimatePresence initial={false} mode="popLayout">
                            <motion.span
                              key={selectedModel.id}
                              initial={
                                modelMotionEnabled
                                  ? {
                                      opacity: 0,
                                      transform: "translateY(6px)",
                                    }
                                  : false
                              }
                              animate={{
                                opacity: 1,
                                transform: "translateY(0px)",
                              }}
                              exit={
                                modelMotionEnabled
                                  ? {
                                      opacity: 0,
                                      transform: "translateY(-6px)",
                                    }
                                  : { opacity: 0 }
                              }
                              transition={{
                                duration: modelMotionEnabled ? 0.16 : 0,
                                ease: easeOut,
                              }}
                              className="absolute inset-0 flex items-center"
                            >
                              {selectedModel.name}
                            </motion.span>
                          </AnimatePresence>
                        </span>

<motion.span
                          aria-hidden="true"
                          animate={{
                            transform: isModelPickerOpen ? "rotate(180deg)" : "rotate(0deg)",
                          }}
                          transition={{
                            duration: modelMotionEnabled ? 0.16 : 0,
                            ease: easeOut,
                          }}
                          className="flex shrink-0 text-neutral-400"
                        >
                          <ChevronDown className="size-3" strokeWidth={1.8} />
                        </motion.span>
                      </button>
                    ) : null}

{composerActions.map((action) => (
                      <ComposerIconButton
                        key={action.id}
                        label={action.label}
                        onClick={action.onClick}
                        disabled={disabled || isSending || action.disabled}
                      >
                        {action.icon}
                      </ComposerIconButton>
                    ))}
                  </div>

<button
                    type="submit"
                    disabled={!canSend}
                    aria-label={labels.send}
                    onFocus={() => setIsModelPickerOpen(false)}
                    onPointerDown={() => setIsModelPickerOpen(false)}
                    className={cn(
                      "flex size-9 shrink-0 items-center justify-center rounded-xl transition-[color,background-color,transform] duration-150 active:scale-[0.97]",
                      canSend
                        ? "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
                        : "cursor-not-allowed bg-neutral-200 text-neutral-400 dark:bg-neutral-800 dark:text-neutral-600",
                    )}
                  >
                    <ArrowUp className="size-4" strokeWidth={2.25} />
                  </button>
                </motion.div>
              </motion.div>
            </form>
          </div>
        </div>
      </LayoutGroup>
    </MotionConfig>
  );
}

export default AiChatBox;
4c:["$","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"}]]}]}],["$","li","nucleo-ui-essential-fill-duo-18",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nucleo-ui-essential-fill-duo-18","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":"nucleo-ui-essential-fill-duo-18"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/ai-chat-box.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>