npm - @openhands/agent-canvas - Versions diffs - 1.12.0 → 1.13.0 - Mend

@openhands/agent-canvas 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (732) hide show

package/dist/components/features/chat/components/chat-input-actions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport {\n ChatInputLlmProfilePicker,\n ChatInputLlmProfileMenuContent,\n} from \"./chat-input-llm-profile-picker\";\nimport { resolvePickerKind } from \"./resolve-picker-kind\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useAgentProfiles } from \"#/hooks/query/use-agent-profiles\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n chatInputIconButtonClassName,\n formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n disabled: boolean;\n canSubmit?: boolean;\n hasStartedConversation?: boolean;\n onAddFileClick?: () => void;\n showButton?: boolean;\n buttonClassName?: string;\n handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n disabled,\n canSubmit = true,\n hasStartedConversation,\n onAddFileClick = () => {},\n showButton = true,\n buttonClassName = \"\",\n handleSubmit = () => {},\n}: ChatInputActionsProps) {\n const { t } = useTranslation(\"openhands\");\n const unifiedPauseMutation = useUnifiedPauseConversation();\n const pauseConversationMutation = usePauseConversation();\n const resumeConversationMutation = useResumeConversation();\n const { conversationId } = useOptionalConversationId();\n const { backend } = useActiveBackend();\n const isCloud = backend.kind === \"cloud\";\n const modelState = useChatInputModelState();\n // Agent-profile switching lives in the \"+\" tools menu while the conversation\n // hasn't started (OSS-5735) — the pill itself is always an LLM selector. The\n // gate is computed here (not in the menu) so ToolsContextMenu only mounts the\n // profile submenu when it can actually be used: pre-start, not on a task\n // route, and only when the backend has profiles (#1571 fallback). Fetch is\n // limited to the pre-start window.\n const isPreStart = !conversationId \|\| hasStartedConversation === false;\n const agentProfilesForStart = useAgentProfiles({ enabled: isPreStart });\n const showAgentProfileSwitch =\n isPreStart &&\n !(conversationId?.startsWith(\"task-\") ?? false) &&\n (agentProfilesForStart.data?.profiles?.length ?? 0) > 0;\n // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n const webSocketStatus = useUnifiedWebSocketStatus();\n const { curAgentState } = useAgentState();\n const { conversationMode, setConversationMode } = useConversationStore();\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n const actionsRowRef = React.useRef<HTMLDivElement>(null);\n const rightSectionRef = React.useRef<HTMLDivElement>(null);\n const addFileRef = React.useRef<HTMLDivElement>(null);\n const codeRef = React.useRef<HTMLDivElement>(null);\n const modelRef = React.useRef<HTMLDivElement>(null);\n const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n Number.POSITIVE_INFINITY,\n );\n const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n const [addFileWidth, setAddFileWidth] = React.useState(32);\n const [codeWidth, setCodeWidth] = React.useState(96);\n const [modelWidth, setModelWidth] = React.useState(120);\n const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n const [activeSubmenu, setActiveSubmenu] = React.useState<\n \"agent\" \| \"model\" \| null\n >(null);\n const [overflowPortalStyle, setOverflowPortalStyle] =\n React.useState<React.CSSProperties>();\n\n React.useEffect(() => {\n const rowEl = actionsRowRef.current;\n const rightEl = rightSectionRef.current;\n const addEl = addFileRef.current;\n const codeEl = codeRef.current;\n const modelEl = modelRef.current;\n\n if (\n !rowEl \|\|\n !rightEl \|\|\n !addEl \|\|\n !modelEl \|\|\n (showChangeAgentButton && !codeEl) \|\|\n typeof ResizeObserver === \"undefined\"\n ) {\n return;\n }\n\n const syncWidths = () => {\n const nextRowWidth = rowEl.getBoundingClientRect().width;\n const nextRightWidth = rightEl.getBoundingClientRect().width;\n const nextAddWidth = addEl.getBoundingClientRect().width;\n const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n if (codeEl) {\n const nextCodeWidth = codeEl.getBoundingClientRect().width;\n if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n }\n };\n\n const observer = new ResizeObserver(() => {\n syncWidths();\n });\n\n observer.observe(rowEl);\n observer.observe(rightEl);\n observer.observe(addEl);\n observer.observe(modelEl);\n if (codeEl) {\n observer.observe(codeEl);\n }\n\n syncWidths();\n\n return () => observer.disconnect();\n }, [showChangeAgentButton]);\n\n const handlePauseAgent = () => {\n if (!conversationId) return;\n pauseConversationMutation.mutate({ conversationId });\n };\n\n const handleResumeAgentClick = () => {\n if (!conversationId) return;\n resumeConversationMutation.mutate({ conversationId });\n };\n\n const isPausing =\n unifiedPauseMutation.isPending \|\| pauseConversationMutation.isPending;\n\n const OVERFLOW_BUTTON_WIDTH = 28;\n const INLINE_GAP = 12;\n const ROOT_GAP = 8;\n\n const fitOptionalItems = React.useCallback(\n (availableWidth: number) => {\n let remaining = availableWidth;\n const next = {\n showCodeInline: false,\n showModelInline: false,\n };\n\n if (showChangeAgentButton && remaining >= codeWidth) {\n next.showCodeInline = true;\n remaining -= codeWidth + INLINE_GAP;\n }\n\n if (remaining >= modelWidth) {\n next.showModelInline = true;\n }\n\n return next;\n },\n [showChangeAgentButton, codeWidth, modelWidth],\n );\n\n const leftBaseWidth =\n actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n const allOptionalFit =\n (!showChangeAgentButton \|\| fitWithoutOverflow.showCodeInline) &&\n fitWithoutOverflow.showModelInline;\n\n const fitWithOverflow = allOptionalFit\n ? fitWithoutOverflow\n : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n const showCodeInline = !showChangeAgentButton\n ? false\n : fitWithOverflow.showCodeInline;\n const showModelInline = fitWithOverflow.showModelInline;\n const showAddFileInline = true;\n const showAgentStatusInline = actionsRowWidth >= 360;\n\n const hasOverflowItems =\n !showAddFileInline \|\|\n (showChangeAgentButton && !showCodeInline) \|\|\n !showModelInline;\n\n React.useEffect(() => {\n if (!hasOverflowItems) {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n }\n }, [hasOverflowItems]);\n\n const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n });\n\n const isAgentSwitcherDisabled =\n curAgentState === AgentState.RUNNING \|\|\n isCreatingConversation \|\|\n webSocketStatus !== \"OPEN\";\n\n const closeOverflowMenus = () => {\n setActiveSubmenu(null);\n setIsOverflowOpen(false);\n };\n\n // Which chat-input LLM picker to show — the constrained ACP model picker or\n // the LLM-profile picker (unit-tested in `resolve-picker-kind.test.ts`).\n const pickerKind = resolvePickerKind({ isAcp: modelState.isAcpContext });\n\n // Shared styling for the settings link inside the overflow submenu content.\n const overflowSettingsLinkClassName = cn(\n \"group\",\n formControlTransitionClassName,\n );\n const overflowSettingsIconClassName = cn(\n \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n formControlTransitionClassName,\n );\n\n React.useLayoutEffect(() => {\n if (!isOverflowOpen \|\| !overflowTriggerRef.current) {\n return;\n }\n\n const trigger = overflowTriggerRef.current;\n\n const updatePosition = () => {\n const rect = trigger.getBoundingClientRect();\n const GAP = 8;\n setOverflowPortalStyle({\n position: \"fixed\",\n top: rect.top - GAP,\n left: rect.left,\n transform: \"translateY(-100%)\",\n zIndex: 9999,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOverflowOpen]);\n\n const overflowMenu = (\n <ContextMenu\n ref={overflowMenuRef}\n testId=\"chat-input-overflow-menu\"\n position=\"top\"\n alignment=\"left\"\n className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n >\n {showChangeAgentButton && !showCodeInline && (\n <div className=\"relative group/overflow-agent\">\n <ContextMenuListItem\n testId=\"overflow-agent-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"agent\" ? null : \"agent\",\n )\n }\n isDisabled={isAgentSwitcherDisabled}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={\n conversationMode === \"code\"\n ? t(I18nKey.COMMON$CODE)\n : t(I18nKey.COMMON$PLAN)\n }\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n {!isAgentSwitcherDisabled && (\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"agent\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n <ContextMenu\n testId=\"overflow-agent-submenu\"\n className=\"overflow-visible min-w-[195px]\"\n >\n <ContextMenuListItem\n testId=\"overflow-agent-code\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={t(I18nKey.COMMON$CODE)}\n />\n </ContextMenuListItem>\n <ContextMenuListItem\n testId=\"overflow-agent-plan\"\n onClick={(event) => {\n handlePlanClick(event);\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={\n <LessonPlanIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n }\n text={t(I18nKey.COMMON$PLAN)}\n />\n </ContextMenuListItem>\n </ContextMenu>\n </div>\n )}\n </div>\n )}\n {!showModelInline && (\n <div className=\"relative group/overflow-model\">\n <ContextMenuListItem\n testId=\"overflow-model-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"model\" ? null : \"model\",\n )\n }\n >\n <ToolsContextMenuIconText\n icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"model\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n scrolls within the menu instead of overflowing the viewport.\n Safe because this menu has no floating children (tooltips /\n nested popovers) that would be clipped — only a flat model list\n + Settings link. Revisit if floating children are added here. /}\n <ContextMenu\n testId=\"overflow-model-submenu\"\n className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n >\n {pickerKind === \"model\" ? (\n <ChatInputModelMenuContent\n model={modelState}\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n ) : (\n <ChatInputLlmProfileMenuContent\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n )}\n </ContextMenu>\n </div>\n </div>\n )}\n </ContextMenu>\n );\n\n return (\n <div\n ref={actionsRowRef}\n className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n >\n <div className=\"flex min-w-0 items-center gap-1\">\n <div className=\"flex min-w-0 items-center gap-3\">\n <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n <ChatAddFileButton\n disabled={disabled}\n handleFileIconClick={onAddFileClick}\n showAgentProfileSwitch={showAgentProfileSwitch}\n />\n </div>\n {showChangeAgentButton && (\n <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n <ChangeAgentButton />\n </div>\n )}\n <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n {/ Picker depends on backend + ACP context; see the `pickerKind`\n cases above. */}\n {pickerKind === \"model\" ? (\n <ChatInputModel />\n ) : (\n <ChatInputLlmProfilePicker />\n )}\n </div>\n\n {hasOverflowItems && (\n <div className=\"relative shrink-0\">\n <button\n ref={overflowTriggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-6\")}\n aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n aria-expanded={isOverflowOpen}\n aria-haspopup=\"menu\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsOverflowOpen((open) => !open);\n }}\n >\n <ThreeDotsVerticalIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n </button>\n\n {isOverflowOpen &&\n typeof document !== \"undefined\" &&\n overflowPortalStyle &&\n ReactDOM.createPortal(\n <div style={overflowPortalStyle}>{overflowMenu}</div>,\n document.body,\n )}\n </div>\n )}\n </div>\n </div>\n <div\n ref={rightSectionRef}\n className=\"ml-auto flex shrink-0 items-center gap-2\"\n >\n {showAgentStatusInline && conversationId && (\n <AgentStatus\n handleStop={handlePauseAgent}\n handleResumeAgent={handleResumeAgentClick}\n disabled={disabled}\n isPausing={isPausing}\n />\n )}\n {showButton && (\n <ChatSendButton\n buttonClassName={buttonClassName}\n handleSubmit={handleSubmit}\n disabled={disabled \|\| !canSubmit}\n />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport {\n ChatInputLlmProfilePicker,\n ChatInputLlmProfileMenuContent,\n} from \"./chat-input-llm-profile-picker\";\nimport { resolvePickerKind } from \"./resolve-picker-kind\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport { ContextWindowMeter } from \"./context-window-meter\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useAgentProfiles } from \"#/hooks/query/use-agent-profiles\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n chatInputIconButtonClassName,\n formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n disabled: boolean;\n canSubmit?: boolean;\n hasStartedConversation?: boolean;\n onAddFileClick?: () => void;\n showButton?: boolean;\n buttonClassName?: string;\n handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n disabled,\n canSubmit = true,\n hasStartedConversation,\n onAddFileClick = () => {},\n showButton = true,\n buttonClassName = \"\",\n handleSubmit = () => {},\n}: ChatInputActionsProps) {\n const { t } = useTranslation(\"openhands\");\n const unifiedPauseMutation = useUnifiedPauseConversation();\n const pauseConversationMutation = usePauseConversation();\n const resumeConversationMutation = useResumeConversation();\n const { conversationId } = useOptionalConversationId();\n const { backend } = useActiveBackend();\n const isCloud = backend.kind === \"cloud\";\n const modelState = useChatInputModelState();\n // Agent-profile switching lives in the \"+\" tools menu while the conversation\n // hasn't started (OSS-5735) — the pill itself is always an LLM selector. The\n // gate is computed here (not in the menu) so ToolsContextMenu only mounts the\n // profile submenu when it can actually be used: pre-start, not on a task\n // route, and only when the backend has profiles (#1571 fallback). Fetch is\n // limited to the pre-start window.\n const isPreStart = !conversationId \|\| hasStartedConversation === false;\n const agentProfilesForStart = useAgentProfiles({ enabled: isPreStart });\n const showAgentProfileSwitch =\n isPreStart &&\n !(conversationId?.startsWith(\"task-\") ?? false) &&\n (agentProfilesForStart.data?.profiles?.length ?? 0) > 0;\n // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n const webSocketStatus = useUnifiedWebSocketStatus();\n const { curAgentState } = useAgentState();\n const { conversationMode, setConversationMode } = useConversationStore();\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n const actionsRowRef = React.useRef<HTMLDivElement>(null);\n const rightSectionRef = React.useRef<HTMLDivElement>(null);\n const addFileRef = React.useRef<HTMLDivElement>(null);\n const codeRef = React.useRef<HTMLDivElement>(null);\n const modelRef = React.useRef<HTMLDivElement>(null);\n const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n Number.POSITIVE_INFINITY,\n );\n const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n const [addFileWidth, setAddFileWidth] = React.useState(32);\n const [codeWidth, setCodeWidth] = React.useState(96);\n const [modelWidth, setModelWidth] = React.useState(120);\n const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n const [activeSubmenu, setActiveSubmenu] = React.useState<\n \"agent\" \| \"model\" \| null\n >(null);\n const [overflowPortalStyle, setOverflowPortalStyle] =\n React.useState<React.CSSProperties>();\n\n React.useEffect(() => {\n const rowEl = actionsRowRef.current;\n const rightEl = rightSectionRef.current;\n const addEl = addFileRef.current;\n const codeEl = codeRef.current;\n const modelEl = modelRef.current;\n\n if (\n !rowEl \|\|\n !rightEl \|\|\n !addEl \|\|\n !modelEl \|\|\n (showChangeAgentButton && !codeEl) \|\|\n typeof ResizeObserver === \"undefined\"\n ) {\n return;\n }\n\n const syncWidths = () => {\n const nextRowWidth = rowEl.getBoundingClientRect().width;\n const nextRightWidth = rightEl.getBoundingClientRect().width;\n const nextAddWidth = addEl.getBoundingClientRect().width;\n const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n if (codeEl) {\n const nextCodeWidth = codeEl.getBoundingClientRect().width;\n if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n }\n };\n\n const observer = new ResizeObserver(() => {\n syncWidths();\n });\n\n observer.observe(rowEl);\n observer.observe(rightEl);\n observer.observe(addEl);\n observer.observe(modelEl);\n if (codeEl) {\n observer.observe(codeEl);\n }\n\n syncWidths();\n\n return () => observer.disconnect();\n }, [showChangeAgentButton]);\n\n const handlePauseAgent = () => {\n if (!conversationId) return;\n pauseConversationMutation.mutate({ conversationId });\n };\n\n const handleResumeAgentClick = () => {\n if (!conversationId) return;\n resumeConversationMutation.mutate({ conversationId });\n };\n\n const isPausing =\n unifiedPauseMutation.isPending \|\| pauseConversationMutation.isPending;\n\n const OVERFLOW_BUTTON_WIDTH = 28;\n const INLINE_GAP = 12;\n const ROOT_GAP = 8;\n\n const fitOptionalItems = React.useCallback(\n (availableWidth: number) => {\n let remaining = availableWidth;\n const next = {\n showCodeInline: false,\n showModelInline: false,\n };\n\n if (showChangeAgentButton && remaining >= codeWidth) {\n next.showCodeInline = true;\n remaining -= codeWidth + INLINE_GAP;\n }\n\n if (remaining >= modelWidth) {\n next.showModelInline = true;\n }\n\n return next;\n },\n [showChangeAgentButton, codeWidth, modelWidth],\n );\n\n const leftBaseWidth =\n actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n const allOptionalFit =\n (!showChangeAgentButton \|\| fitWithoutOverflow.showCodeInline) &&\n fitWithoutOverflow.showModelInline;\n\n const fitWithOverflow = allOptionalFit\n ? fitWithoutOverflow\n : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n const showCodeInline = !showChangeAgentButton\n ? false\n : fitWithOverflow.showCodeInline;\n const showModelInline = fitWithOverflow.showModelInline;\n const showAddFileInline = true;\n const showAgentStatusInline = actionsRowWidth >= 360;\n\n const hasOverflowItems =\n !showAddFileInline \|\|\n (showChangeAgentButton && !showCodeInline) \|\|\n !showModelInline;\n\n React.useEffect(() => {\n if (!hasOverflowItems) {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n }\n }, [hasOverflowItems]);\n\n const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n });\n\n const isAgentSwitcherDisabled =\n curAgentState === AgentState.RUNNING \|\|\n isCreatingConversation \|\|\n webSocketStatus !== \"OPEN\";\n\n const closeOverflowMenus = () => {\n setActiveSubmenu(null);\n setIsOverflowOpen(false);\n };\n\n // Which chat-input LLM picker to show — the constrained ACP model picker or\n // the LLM-profile picker (unit-tested in `resolve-picker-kind.test.ts`).\n const pickerKind = resolvePickerKind({ isAcp: modelState.isAcpContext });\n\n // Shared styling for the settings link inside the overflow submenu content.\n const overflowSettingsLinkClassName = cn(\n \"group\",\n formControlTransitionClassName,\n );\n const overflowSettingsIconClassName = cn(\n \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n formControlTransitionClassName,\n );\n\n React.useLayoutEffect(() => {\n if (!isOverflowOpen \|\| !overflowTriggerRef.current) {\n return;\n }\n\n const trigger = overflowTriggerRef.current;\n\n const updatePosition = () => {\n const rect = trigger.getBoundingClientRect();\n const GAP = 8;\n setOverflowPortalStyle({\n position: \"fixed\",\n top: rect.top - GAP,\n left: rect.left,\n transform: \"translateY(-100%)\",\n zIndex: 9999,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOverflowOpen]);\n\n const overflowMenu = (\n <ContextMenu\n ref={overflowMenuRef}\n testId=\"chat-input-overflow-menu\"\n position=\"top\"\n alignment=\"left\"\n className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n >\n {showChangeAgentButton && !showCodeInline && (\n <div className=\"relative group/overflow-agent\">\n <ContextMenuListItem\n testId=\"overflow-agent-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"agent\" ? null : \"agent\",\n )\n }\n isDisabled={isAgentSwitcherDisabled}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={\n conversationMode === \"code\"\n ? t(I18nKey.COMMON$CODE)\n : t(I18nKey.COMMON$PLAN)\n }\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n {!isAgentSwitcherDisabled && (\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"agent\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n <ContextMenu\n testId=\"overflow-agent-submenu\"\n className=\"overflow-visible min-w-[195px]\"\n >\n <ContextMenuListItem\n testId=\"overflow-agent-code\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={t(I18nKey.COMMON$CODE)}\n />\n </ContextMenuListItem>\n <ContextMenuListItem\n testId=\"overflow-agent-plan\"\n onClick={(event) => {\n handlePlanClick(event);\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={\n <LessonPlanIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n }\n text={t(I18nKey.COMMON$PLAN)}\n />\n </ContextMenuListItem>\n </ContextMenu>\n </div>\n )}\n </div>\n )}\n {!showModelInline && (\n <div className=\"relative group/overflow-model\">\n <ContextMenuListItem\n testId=\"overflow-model-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"model\" ? null : \"model\",\n )\n }\n >\n <ToolsContextMenuIconText\n icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"model\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n scrolls within the menu instead of overflowing the viewport.\n Safe because this menu has no floating children (tooltips /\n nested popovers) that would be clipped — only a flat model list\n + Settings link. Revisit if floating children are added here. /}\n <ContextMenu\n testId=\"overflow-model-submenu\"\n className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n >\n {pickerKind === \"model\" ? (\n <ChatInputModelMenuContent\n model={modelState}\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n ) : (\n <ChatInputLlmProfileMenuContent\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n )}\n </ContextMenu>\n </div>\n </div>\n )}\n </ContextMenu>\n );\n\n return (\n <div\n ref={actionsRowRef}\n className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n >\n <div className=\"flex min-w-0 items-center gap-1\">\n <div className=\"flex min-w-0 items-center gap-3\">\n <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n <ChatAddFileButton\n disabled={disabled}\n handleFileIconClick={onAddFileClick}\n showAgentProfileSwitch={showAgentProfileSwitch}\n />\n </div>\n {showChangeAgentButton && (\n <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n <ChangeAgentButton />\n </div>\n )}\n <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n {/ Picker depends on backend + ACP context; see the `pickerKind`\n cases above. */}\n {pickerKind === \"model\" ? (\n <ChatInputModel />\n ) : (\n <ChatInputLlmProfilePicker />\n )}\n </div>\n\n {hasOverflowItems && (\n <div className=\"relative shrink-0\">\n <button\n ref={overflowTriggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-6\")}\n aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n aria-expanded={isOverflowOpen}\n aria-haspopup=\"menu\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsOverflowOpen((open) => !open);\n }}\n >\n <ThreeDotsVerticalIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n </button>\n\n {isOverflowOpen &&\n typeof document !== \"undefined\" &&\n overflowPortalStyle &&\n ReactDOM.createPortal(\n <div style={overflowPortalStyle}>{overflowMenu}</div>,\n document.body,\n )}\n </div>\n )}\n </div>\n </div>\n <div\n ref={rightSectionRef}\n className=\"ml-auto flex shrink-0 items-center gap-2\"\n >\n {showAgentStatusInline && conversationId && (\n <AgentStatus\n handleStop={handlePauseAgent}\n handleResumeAgent={handleResumeAgentClick}\n disabled={disabled}\n isPausing={isPausing}\n />\n )}\n <ContextWindowMeter />\n {showButton && (\n <ChatSendButton\n buttonClassName={buttonClassName}\n handleSubmit={handleSubmit}\n disabled={disabled \|\| !canSubmit}\n />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-grip.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../utils/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({gripRef:e,isGripVisible:n,isGripDragging:i,handleTopEdgeClick:a,handleGripMouseDown:o,handleGripTouchStart:s}){return(0,r.jsxs)(`div`,{className:`absolute top-0 left-0 w-full h-3 z-20 group`,id:`resize-grip`,onClick:a,children:[(0,r.jsx)(`div`,{className:`absolute inset-0 z-[1] cursor-ns-resize select-none`,onMouseDown:o,onTouchStart:s,"aria-hidden":!0}),(0,r.jsx)(`div`,{ref:e,className:t.cn(`pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200`,n||i?`opacity-100`:`opacity-0 group-hover:opacity-100`)})]})}exports.ChatInputGrip=i;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../utils/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({gripRef:e,isGripVisible:n,isGripDragging:i,canResize:a,handleTopEdgeClick:o,handleGripMouseDown:s,handleGripTouchStart:c}){return(0,r.jsxs)(`div`,{className:t.cn(`absolute top-0 left-0 w-full h-3 z-20 group`,!a&&`pointer-events-none`),id:`resize-grip`,onClick:a?o:void 0,children:[a&&(0,r.jsx)(`div`,{className:`absolute inset-0 z-[1] cursor-ns-resize select-none`,onMouseDown:s,onTouchStart:c,"aria-hidden":!0}),(0,r.jsx)(`div`,{ref:e,className:t.cn(`pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200`,!a&&`opacity-0`,a&&(n||i?`opacity-100`:`opacity-0 group-hover:opacity-100`))})]})}exports.ChatInputGrip=i;
 //# sourceMappingURL=chat-input-grip.cjs.map

package/dist/components/features/chat/components/chat-input-grip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-input-grip.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n gripRef: React.RefObject<HTMLDivElement \| null>;\n isGripVisible: boolean;\n isGripDragging: boolean;\n handleTopEdgeClick: (e: React.MouseEvent) => void;\n handleGripMouseDown: (e: React.MouseEvent) => void;\n handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n gripRef,\n isGripVisible,\n isGripDragging,\n handleTopEdgeClick,\n handleGripMouseDown,\n handleGripTouchStart,\n}: ChatInputGripProps) {\n return (\n <div\n className=\"absolute top-0 left-0 w-full h-3 z-20 group\"\n id=\"resize-grip\"\n onClick={handleTopEdgeClick}\n >\n {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n <div\n className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n onMouseDown={handleGripMouseDown}\n onTouchStart={handleGripTouchStart}\n aria-hidden\n />\n <div\n ref={gripRef}\n className={cn(\n \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n isGripVisible \|\| isGripDragging\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100\",\n )}\n />\n </div>\n );\n}\n"],"mappings":"~~kLAYA~~,SAAgB,EAAc,CAC5B,UACA,gBACA,iBACA,qBACA,sBACA,wBACqB,CACrB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,~~UAAU~~,~~8CACV~~,GAAG,cACH,QAAS,~~WAHX~~,~~EAME~~,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,YAAa,EACb,aAAc,EACd,cAAA,EACD,CAAA,~~GACD~~,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,uGACA,GAAiB,~~EACb~~,cACA,~~mCACN~~,CACD,CAAA,CACE,GAET"}
1	+ {"version":3,"file":"chat-input-grip.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n gripRef: React.RefObject<HTMLDivElement \| null>;\n isGripVisible: boolean;\n isGripDragging: boolean;\n canResize: boolean;\n handleTopEdgeClick: (e: React.MouseEvent) => void;\n handleGripMouseDown: (e: React.MouseEvent) => void;\n handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n gripRef,\n isGripVisible,\n isGripDragging,\n canResize,\n handleTopEdgeClick,\n handleGripMouseDown,\n handleGripTouchStart,\n}: ChatInputGripProps) {\n return (\n <div\n className={cn(\n \"absolute top-0 left-0 w-full h-3 z-20 group\",\n !canResize && \"pointer-events-none\",\n )}\n id=\"resize-grip\"\n onClick={canResize ? handleTopEdgeClick : undefined}\n >\n {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n {canResize && (\n <div\n className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n onMouseDown={handleGripMouseDown}\n onTouchStart={handleGripTouchStart}\n aria-hidden\n />\n )}\n <div\n ref={gripRef}\n className={cn(\n \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n !canResize && \"opacity-0\",\n canResize &&\n (isGripVisible \|\| isGripDragging\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100\"),\n )}\n />\n </div>\n );\n}\n"],"mappings":"kLAaA,SAAgB,EAAc,CAC5B,UACA,gBACA,iBACA,YACA,qBACA,sBACA,wBACqB,CACrB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,8CACA,CAAC,GAAa,qBAChB,EACA,GAAG,cACH,QAAS,EAAY,EAAqB,IAAA,YAN5C,CASG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,YAAa,EACb,aAAc,EACd,cAAA,EACD,CAAA,GAEH,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,uGACA,CAAC,GAAa,YACd,IACG,GAAiB,EACd,cACA,oCACR,CACD,CAAA,CACE,GAET"}

package/dist/components/features/chat/components/chat-input-grip.d.ts CHANGED Viewed

@@ -3,9 +3,10 @@ interface ChatInputGripProps {
     gripRef: React.RefObject<HTMLDivElement | null>;
     isGripVisible: boolean;
     isGripDragging: boolean;
+    canResize: boolean;
     handleTopEdgeClick: (e: React.MouseEvent) => void;
     handleGripMouseDown: (e: React.MouseEvent) => void;
     handleGripTouchStart: (e: React.TouchEvent) => void;
 }
-export declare function ChatInputGrip({ gripRef, isGripVisible, isGripDragging, handleTopEdgeClick, handleGripMouseDown, handleGripTouchStart, }: ChatInputGripProps): React.JSX.Element;
+export declare function ChatInputGrip({ gripRef, isGripVisible, isGripDragging, canResize, handleTopEdgeClick, handleGripMouseDown, handleGripTouchStart, }: ChatInputGripProps): React.JSX.Element;
 export {};

package/dist/components/features/chat/components/chat-input-grip.js CHANGED Viewed

@@ -2,19 +2,19 @@ import { cn as e } from "../../../../utils/utils.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/features/chat/components/chat-input-grip.tsx
-function r({ gripRef: r, isGripVisible: i, isGripDragging: a, handleTopEdgeClick: o, handleGripMouseDown: s, handleGripTouchStart: c }) {
+function r({ gripRef: r, isGripVisible: i, isGripDragging: a, canResize: o, handleTopEdgeClick: s, handleGripMouseDown: c, handleGripTouchStart: l }) {
 	return /* @__PURE__ */ n("div", {
-		className: "absolute top-0 left-0 w-full h-3 z-20 group",
+		className: e("absolute top-0 left-0 w-full h-3 z-20 group", !o && "pointer-events-none"),
 		id: "resize-grip",
-		onClick: o,
-		children: [/* @__PURE__ */ t("div", {
+		onClick: o ? s : void 0,
+		children: [o && /* @__PURE__ */ t("div", {
 			className: "absolute inset-0 z-[1] cursor-ns-resize select-none",
-			onMouseDown: s,
-			onTouchStart: c,
+			onMouseDown: c,
+			onTouchStart: l,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ t("div", {
 			ref: r,
-			className: e("pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200", i || a ? "opacity-100" : "opacity-0 group-hover:opacity-100")
+			className: e("pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200", !o && "opacity-0", o && (i || a ? "opacity-100" : "opacity-0 group-hover:opacity-100"))
 		})]
 	});
 }

package/dist/components/features/chat/components/chat-input-grip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-input-grip.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n gripRef: React.RefObject<HTMLDivElement \| null>;\n isGripVisible: boolean;\n isGripDragging: boolean;\n handleTopEdgeClick: (e: React.MouseEvent) => void;\n handleGripMouseDown: (e: React.MouseEvent) => void;\n handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n gripRef,\n isGripVisible,\n isGripDragging,\n handleTopEdgeClick,\n handleGripMouseDown,\n handleGripTouchStart,\n}: ChatInputGripProps) {\n return (\n <div\n className=\"absolute top-0 left-0 w-full h-3 z-20 group\"\n id=\"resize-grip\"\n onClick={handleTopEdgeClick}\n >\n {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n <div\n className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n onMouseDown={handleGripMouseDown}\n onTouchStart={handleGripTouchStart}\n aria-hidden\n />\n <div\n ref={gripRef}\n className={cn(\n \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n isGripVisible \|\| isGripDragging\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100\",\n )}\n />\n </div>\n );\n}\n"],"mappings":";;;;~~AAYA~~,SAAgB,EAAc,EAC5B,YACA,kBACA,mBACA,uBACA,wBACA,2BACqB;CACrB,OACE,kBAAC,OAAD;EACE,~~WAAU~~;~~EACV~~,IAAG;EACH,SAAS;~~YAHX~~,~~CAME~~,kBAAC,OAAD;GACE,WAAU;GACV,aAAa;GACb,cAAc;GACd,eAAA;EACD,CAAA,~~GACD~~,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,wGACA,KAAiB,~~IACb~~,gBACA,~~mCACN~~;EACD,CAAA,CACE;;AAET"}
1	+ {"version":3,"file":"chat-input-grip.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n gripRef: React.RefObject<HTMLDivElement \| null>;\n isGripVisible: boolean;\n isGripDragging: boolean;\n canResize: boolean;\n handleTopEdgeClick: (e: React.MouseEvent) => void;\n handleGripMouseDown: (e: React.MouseEvent) => void;\n handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n gripRef,\n isGripVisible,\n isGripDragging,\n canResize,\n handleTopEdgeClick,\n handleGripMouseDown,\n handleGripTouchStart,\n}: ChatInputGripProps) {\n return (\n <div\n className={cn(\n \"absolute top-0 left-0 w-full h-3 z-20 group\",\n !canResize && \"pointer-events-none\",\n )}\n id=\"resize-grip\"\n onClick={canResize ? handleTopEdgeClick : undefined}\n >\n {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n {canResize && (\n <div\n className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n onMouseDown={handleGripMouseDown}\n onTouchStart={handleGripTouchStart}\n aria-hidden\n />\n )}\n <div\n ref={gripRef}\n className={cn(\n \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n !canResize && \"opacity-0\",\n canResize &&\n (isGripVisible \|\| isGripDragging\n ? \"opacity-100\"\n : \"opacity-0 group-hover:opacity-100\"),\n )}\n />\n </div>\n );\n}\n"],"mappings":";;;;AAaA,SAAgB,EAAc,EAC5B,YACA,kBACA,mBACA,cACA,uBACA,wBACA,2BACqB;CACrB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,+CACA,CAAC,KAAa,qBAChB;EACA,IAAG;EACH,SAAS,IAAY,IAAqB,KAAA;YAN5C,CASG,KACC,kBAAC,OAAD;GACE,WAAU;GACV,aAAa;GACb,cAAc;GACd,eAAA;EACD,CAAA,GAEH,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,wGACA,CAAC,KAAa,aACd,MACG,KAAiB,IACd,gBACA,oCACR;EACD,CAAA,CACE;;AAET"}

package/dist/components/features/chat/components/context-window-meter.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/minimize.cjs"),o=require("../../../../utils/utils.cjs"),s=require("../../../../utils/form-control-classes.cjs"),c=require("../../../shared/buttons/styled-tooltip.cjs"),l=require("../../context-menu/context-menu-list-item.cjs"),u=require("../../../../hooks/use-click-outside-element.cjs"),d=require("../../../../ui/divider.cjs"),f=require("../../../../hooks/use-select-conversation-tab.cjs"),p=require("../../../../hooks/use-context-window-usage.cjs"),m=require("../../../../utils/format-token-count.cjs"),h=require("../../../../hooks/use-compact-context-action.cjs"),g=require("../../conversation/conversation-name-context-menu-icon-text.cjs"),_=require("../../conversation/usage-panel/context-meter.cjs"),v=require("./context-window-ring.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x={neutral:`bg-foreground`,warning:`bg-amber-500`,danger:`bg-red-500`},S={neutral:`text-[var(--oh-muted)]`,warning:`text-amber-500`,danger:`text-red-500`};function C(){let{t:e}=t.useTranslation(`openhands`),C=p.useContextWindowUsage(),{navigateToTab:w}=f.useSelectConversationTab(),[T,E]=y.default.useState(!1),D=y.default.useRef(null),O=u.useClickOutsideElement(()=>E(!1),D),{handleCompact:k,isCompacting:A,isDisabled:j}=h.useCompactContextAction(C?.perTurnToken??0);if(!C)return null;let M=m.getContextWindowUsagePercentage(C.perTurnToken,C.contextWindow),N=Math.round(M),P=Math.max(0,100-N),F=`${N}% ${e(n.I18nKey.CONVERSATION$USED)} (${P}% ${e(n.I18nKey.CONVERSATION$LEFT)})`,I=`${m.formatCompactTokenCount(C.perTurnToken)} / ${m.formatCompactTokenCount(C.contextWindow)}`,L=_.getContextFillTone(M),R=()=>{E(!1),w(`usage`)};return(0,b.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,b.jsx)(c.StyledTooltip,{content:e(n.I18nKey.CHAT_INTERFACE$SHOW_CONTEXT),placement:`top`,children:(0,b.jsx)(`button`,{ref:D,type:`button`,className:o.cn(s.chatInputIconButtonClassName,`size-8`),"aria-label":`${e(n.I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${F}`,"aria-expanded":T,"aria-haspopup":`dialog`,"data-testid":`context-window-meter`,onClick:e=>{e.preventDefault(),e.stopPropagation(),E(e=>!e)},children:(0,b.jsx)(v.ContextWindowRing,{percentage:M})})}),T&&(0,b.jsxs)(`div`,{ref:O,"data-testid":`context-window-meter-popover`,className:o.cn(`absolute bottom-full right-0 z-[60] mb-2 w-[280px]`,`flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`),children:[(0,b.jsxs)(`div`,{className:`flex flex-col gap-2 px-2 py-1.5`,children:[(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2 text-sm`,children:[(0,b.jsx)(`span`,{className:`font-semibold text-[var(--oh-foreground)]`,children:e(n.I18nKey.CONVERSATION$CONTEXT_WINDOW)}),(0,b.jsx)(`span`,{className:o.cn(`shrink-0 text-xs`,S[L]),children:F})]}),(0,b.jsx)(`button`,{type:`button`,"data-testid":`context-window-meter-bar-button`,className:`relative h-1.5 w-full rounded-full cursor-pointer`,style:{backgroundColor:v.CONTEXT_WINDOW_TRACK_COLOR},"aria-label":e(n.I18nKey.COMMON$USAGE),onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(`span`,{className:o.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,x[L]),style:{width:`${Math.min(100,M)}%`}})}),(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,b.jsxs)(`button`,{type:`button`,"data-testid":`context-window-compact-button`,disabled:j,"aria-busy":A,"aria-label":e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT),className:o.cn(`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs`,`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,`transition-colors disabled:cursor-not-allowed disabled:opacity-50`),onClick:e=>{e.preventDefault(),e.stopPropagation(),k()},children:[A?(0,b.jsx)(i.LoaderCircle,{className:`size-3 animate-spin`,"aria-hidden":!0}):(0,b.jsx)(a.Minimize,{className:`size-3`,"aria-hidden":!0}),(0,b.jsx)(`span`,{children:e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT)})]}),(0,b.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:I})]})]}),(0,b.jsx)(d.Divider,{inset:`menu`}),(0,b.jsx)(l.ContextMenuListItem,{testId:`context-window-plan-usage`,onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(g.ConversationNameContextMenuIconText,{icon:(0,b.jsx)(r.Gauge,{size:16}),text:e(n.I18nKey.COMMON$USAGE)})})]})]})}exports.ContextWindowMeter=C;
2	+ //# sourceMappingURL=context-window-meter.cjs.map

package/dist/components/features/chat/components/context-window-meter.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context-window-meter.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/context-window-meter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Gauge, Loader2, Minimize } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useContextWindowUsage } from \"#/hooks/use-context-window-usage\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useCompactContextAction } from \"#/hooks/use-compact-context-action\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { ConversationNameContextMenuIconText } from \"#/components/features/conversation/conversation-name-context-menu-icon-text\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputIconButtonClassName } from \"#/utils/form-control-classes\";\nimport {\n formatCompactTokenCount,\n getContextWindowUsagePercentage,\n} from \"#/utils/format-token-count\";\nimport { getContextFillTone } from \"#/components/features/conversation/usage-panel/context-meter\";\nimport {\n ContextWindowRing,\n CONTEXT_WINDOW_TRACK_COLOR,\n} from \"./context-window-ring\";\n\nconst TONE_BAR_CLASS = {\n neutral: \"bg-foreground\",\n warning: \"bg-amber-500\",\n danger: \"bg-red-500\",\n} as const;\n\nconst TONE_LABEL_CLASS = {\n neutral: \"text-[var(--oh-muted)]\",\n warning: \"text-amber-500\",\n danger: \"text-red-500\",\n} as const;\n\nexport function ContextWindowMeter() {\n const { t } = useTranslation(\"openhands\");\n const usage = useContextWindowUsage();\n const { navigateToTab } = useSelectConversationTab();\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const popoverRef = useClickOutsideElement<HTMLDivElement>(\n () => setIsPopoverOpen(false),\n triggerRef,\n );\n const { handleCompact, isCompacting, isDisabled } = useCompactContextAction(\n usage?.perTurnToken ?? 0,\n );\n\n if (!usage) {\n return null;\n }\n\n const usagePercentage = getContextWindowUsagePercentage(\n usage.perTurnToken,\n usage.contextWindow,\n );\n const roundedPercentage = Math.round(usagePercentage);\n const remainingPercentage = Math.max(0, 100 - roundedPercentage);\n const usagePercentLabel = `${roundedPercentage}% ${t(I18nKey.CONVERSATION$USED)} (${remainingPercentage}% ${t(I18nKey.CONVERSATION$LEFT)})`;\n const usageTokenSummary = `${formatCompactTokenCount(usage.perTurnToken)} / ${formatCompactTokenCount(usage.contextWindow)}`;\n const tone = getContextFillTone(usagePercentage);\n\n const openUsagePanel = () => {\n setIsPopoverOpen(false);\n navigateToTab(\"usage\");\n };\n\n return (\n <div className=\"relative shrink-0\">\n <StyledTooltip\n content={t(I18nKey.CHAT_INTERFACE$SHOW_CONTEXT)}\n placement=\"top\"\n >\n <button\n ref={triggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-8\")}\n aria-label={`${t(I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${usagePercentLabel}`}\n aria-expanded={isPopoverOpen}\n aria-haspopup=\"dialog\"\n data-testid=\"context-window-meter\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsPopoverOpen((open) => !open);\n }}\n >\n <ContextWindowRing percentage={usagePercentage} />\n </button>\n </StyledTooltip>\n\n {isPopoverOpen && (\n <div\n ref={popoverRef}\n data-testid=\"context-window-meter-popover\"\n className={cn(\n \"absolute bottom-full right-0 z-[60] mb-2 w-[280px]\",\n \"flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n )}\n >\n <div className=\"flex flex-col gap-2 px-2 py-1.5\">\n <div className=\"flex items-center justify-between gap-2 text-sm\">\n <span className=\"font-semibold text-[var(--oh-foreground)]\">\n {t(I18nKey.CONVERSATION$CONTEXT_WINDOW)}\n </span>\n <span className={cn(\"shrink-0 text-xs\", TONE_LABEL_CLASS[tone])}>\n {usagePercentLabel}\n </span>\n </div>\n\n <button\n type=\"button\"\n data-testid=\"context-window-meter-bar-button\"\n className=\"relative h-1.5 w-full rounded-full cursor-pointer\"\n style={{ backgroundColor: CONTEXT_WINDOW_TRACK_COLOR }}\n aria-label={t(I18nKey.COMMON$USAGE)}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n openUsagePanel();\n }}\n >\n <span\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n TONE_BAR_CLASS[tone],\n )}\n style={{ width: `${Math.min(100, usagePercentage)}%` }}\n />\n </button>\n\n <div className=\"flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n data-testid=\"context-window-compact-button\"\n disabled={isDisabled}\n aria-busy={isCompacting}\n aria-label={t(I18nKey.CONVERSATION$COMPACT_CONTEXT)}\n className={cn(\n \"inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs\",\n \"text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]\",\n \"transition-colors disabled:cursor-not-allowed disabled:opacity-50\",\n )}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n handleCompact();\n }}\n >\n {isCompacting ? (\n <Loader2 className=\"size-3 animate-spin\" aria-hidden />\n ) : (\n <Minimize className=\"size-3\" aria-hidden />\n )}\n <span>{t(I18nKey.CONVERSATION$COMPACT_CONTEXT)}</span>\n </button>\n <span className=\"text-xs text-[var(--oh-muted)]\">\n {usageTokenSummary}\n </span>\n </div>\n </div>\n\n <Divider inset=\"menu\" />\n\n <ContextMenuListItem\n testId=\"context-window-plan-usage\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n openUsagePanel();\n }}\n >\n <ConversationNameContextMenuIconText\n icon={<Gauge size={16} />}\n text={t(I18nKey.COMMON$USAGE)}\n />\n </ContextMenuListItem>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/context-window-meter.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from "react";
2	+ export declare function ContextWindowMeter(): React.JSX.Element \| null;

package/dist/components/features/chat/components/context-window-meter.js ADDED Viewed

@@ -0,0 +1,131 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { Gauge as n } from "../../../../node_modules/lucide-react/dist/esm/icons/gauge.js";
+import { LoaderCircle as r } from "../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { Minimize as i } from "../../../../node_modules/lucide-react/dist/esm/icons/minimize.js";
+import { cn as a } from "../../../../utils/utils.js";
+import { chatInputIconButtonClassName as o } from "../../../../utils/form-control-classes.js";
+import { StyledTooltip as s } from "../../../shared/buttons/styled-tooltip.js";
+import { ContextMenuListItem as c } from "../../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as l } from "../../../../hooks/use-click-outside-element.js";
+import { Divider as u } from "../../../../ui/divider.js";
+import { useSelectConversationTab as d } from "../../../../hooks/use-select-conversation-tab.js";
+import { useContextWindowUsage as f } from "../../../../hooks/use-context-window-usage.js";
+import { formatCompactTokenCount as p, getContextWindowUsagePercentage as m } from "../../../../utils/format-token-count.js";
+import { useCompactContextAction as h } from "../../../../hooks/use-compact-context-action.js";
+import { ConversationNameContextMenuIconText as g } from "../../conversation/conversation-name-context-menu-icon-text.js";
+import { getContextFillTone as _ } from "../../conversation/usage-panel/context-meter.js";
+import { CONTEXT_WINDOW_TRACK_COLOR as v, ContextWindowRing as y } from "./context-window-ring.js";
+import b from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/features/chat/components/context-window-meter.tsx
+var C = {
+	neutral: "bg-foreground",
+	warning: "bg-amber-500",
+	danger: "bg-red-500"
+}, w = {
+	neutral: "text-[var(--oh-muted)]",
+	warning: "text-amber-500",
+	danger: "text-red-500"
+};
+function T() {
+	let { t: T } = e("openhands"), E = f(), { navigateToTab: D } = d(), [O, k] = b.useState(!1), A = b.useRef(null), j = l(() => k(!1), A), { handleCompact: M, isCompacting: N, isDisabled: P } = h(E?.perTurnToken ?? 0);
+	if (!E) return null;
+	let F = m(E.perTurnToken, E.contextWindow), I = Math.round(F), L = Math.max(0, 100 - I), R = `${I}% ${T(t.CONVERSATION$USED)} (${L}% ${T(t.CONVERSATION$LEFT)})`, z = `${p(E.perTurnToken)} / ${p(E.contextWindow)}`, B = _(F), V = () => {
+		k(!1), D("usage");
+	};
+	return /* @__PURE__ */ S("div", {
+		className: "relative shrink-0",
+		children: [/* @__PURE__ */ x(s, {
+			content: T(t.CHAT_INTERFACE$SHOW_CONTEXT),
+			placement: "top",
+			children: /* @__PURE__ */ x("button", {
+				ref: A,
+				type: "button",
+				className: a(o, "size-8"),
+				"aria-label": `${T(t.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${R}`,
+				"aria-expanded": O,
+				"aria-haspopup": "dialog",
+				"data-testid": "context-window-meter",
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation(), k((e) => !e);
+				},
+				children: /* @__PURE__ */ x(y, { percentage: F })
+			})
+		}), O && /* @__PURE__ */ S("div", {
+			ref: j,
+			"data-testid": "context-window-meter-popover",
+			className: a("absolute bottom-full right-0 z-[60] mb-2 w-[280px]", "flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg"),
+			children: [
+				/* @__PURE__ */ S("div", {
+					className: "flex flex-col gap-2 px-2 py-1.5",
+					children: [
+						/* @__PURE__ */ S("div", {
+							className: "flex items-center justify-between gap-2 text-sm",
+							children: [/* @__PURE__ */ x("span", {
+								className: "font-semibold text-[var(--oh-foreground)]",
+								children: T(t.CONVERSATION$CONTEXT_WINDOW)
+							}), /* @__PURE__ */ x("span", {
+								className: a("shrink-0 text-xs", w[B]),
+								children: R
+							})]
+						}),
+						/* @__PURE__ */ x("button", {
+							type: "button",
+							"data-testid": "context-window-meter-bar-button",
+							className: "relative h-1.5 w-full rounded-full cursor-pointer",
+							style: { backgroundColor: v },
+							"aria-label": T(t.COMMON$USAGE),
+							onClick: (e) => {
+								e.preventDefault(), e.stopPropagation(), V();
+							},
+							children: /* @__PURE__ */ x("span", {
+								className: a("absolute inset-y-0 left-0 rounded-full transition-all duration-300", C[B]),
+								style: { width: `${Math.min(100, F)}%` }
+							})
+						}),
+						/* @__PURE__ */ S("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ S("button", {
+								type: "button",
+								"data-testid": "context-window-compact-button",
+								disabled: P,
+								"aria-busy": N,
+								"aria-label": T(t.CONVERSATION$COMPACT_CONTEXT),
+								className: a("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", "text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]", "transition-colors disabled:cursor-not-allowed disabled:opacity-50"),
+								onClick: (e) => {
+									e.preventDefault(), e.stopPropagation(), M();
+								},
+								children: [N ? /* @__PURE__ */ x(r, {
+									className: "size-3 animate-spin",
+									"aria-hidden": !0
+								}) : /* @__PURE__ */ x(i, {
+									className: "size-3",
+									"aria-hidden": !0
+								}), /* @__PURE__ */ x("span", { children: T(t.CONVERSATION$COMPACT_CONTEXT) })]
+							}), /* @__PURE__ */ x("span", {
+								className: "text-xs text-[var(--oh-muted)]",
+								children: z
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ x(u, { inset: "menu" }),
+				/* @__PURE__ */ x(c, {
+					testId: "context-window-plan-usage",
+					onClick: (e) => {
+						e.preventDefault(), e.stopPropagation(), V();
+					},
+					children: /* @__PURE__ */ x(g, {
+						icon: /* @__PURE__ */ x(n, { size: 16 }),
+						text: T(t.COMMON$USAGE)
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { T as ContextWindowMeter };
+//# sourceMappingURL=context-window-meter.js.map

package/dist/components/features/chat/components/context-window-meter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context-window-meter.js","names":[],"sources":["../../../../../src/components/features/chat/components/context-window-meter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Gauge, Loader2, Minimize } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useContextWindowUsage } from \"#/hooks/use-context-window-usage\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useCompactContextAction } from \"#/hooks/use-compact-context-action\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { ConversationNameContextMenuIconText } from \"#/components/features/conversation/conversation-name-context-menu-icon-text\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputIconButtonClassName } from \"#/utils/form-control-classes\";\nimport {\n formatCompactTokenCount,\n getContextWindowUsagePercentage,\n} from \"#/utils/format-token-count\";\nimport { getContextFillTone } from \"#/components/features/conversation/usage-panel/context-meter\";\nimport {\n ContextWindowRing,\n CONTEXT_WINDOW_TRACK_COLOR,\n} from \"./context-window-ring\";\n\nconst TONE_BAR_CLASS = {\n neutral: \"bg-foreground\",\n warning: \"bg-amber-500\",\n danger: \"bg-red-500\",\n} as const;\n\nconst TONE_LABEL_CLASS = {\n neutral: \"text-[var(--oh-muted)]\",\n warning: \"text-amber-500\",\n danger: \"text-red-500\",\n} as const;\n\nexport function ContextWindowMeter() {\n const { t } = useTranslation(\"openhands\");\n const usage = useContextWindowUsage();\n const { navigateToTab } = useSelectConversationTab();\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const popoverRef = useClickOutsideElement<HTMLDivElement>(\n () => setIsPopoverOpen(false),\n triggerRef,\n );\n const { handleCompact, isCompacting, isDisabled } = useCompactContextAction(\n usage?.perTurnToken ?? 0,\n );\n\n if (!usage) {\n return null;\n }\n\n const usagePercentage = getContextWindowUsagePercentage(\n usage.perTurnToken,\n usage.contextWindow,\n );\n const roundedPercentage = Math.round(usagePercentage);\n const remainingPercentage = Math.max(0, 100 - roundedPercentage);\n const usagePercentLabel = `${roundedPercentage}% ${t(I18nKey.CONVERSATION$USED)} (${remainingPercentage}% ${t(I18nKey.CONVERSATION$LEFT)})`;\n const usageTokenSummary = `${formatCompactTokenCount(usage.perTurnToken)} / ${formatCompactTokenCount(usage.contextWindow)}`;\n const tone = getContextFillTone(usagePercentage);\n\n const openUsagePanel = () => {\n setIsPopoverOpen(false);\n navigateToTab(\"usage\");\n };\n\n return (\n <div className=\"relative shrink-0\">\n <StyledTooltip\n content={t(I18nKey.CHAT_INTERFACE$SHOW_CONTEXT)}\n placement=\"top\"\n >\n <button\n ref={triggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-8\")}\n aria-label={`${t(I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${usagePercentLabel}`}\n aria-expanded={isPopoverOpen}\n aria-haspopup=\"dialog\"\n data-testid=\"context-window-meter\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsPopoverOpen((open) => !open);\n }}\n >\n <ContextWindowRing percentage={usagePercentage} />\n </button>\n </StyledTooltip>\n\n {isPopoverOpen && (\n <div\n ref={popoverRef}\n data-testid=\"context-window-meter-popover\"\n className={cn(\n \"absolute bottom-full right-0 z-[60] mb-2 w-[280px]\",\n \"flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n )}\n >\n <div className=\"flex flex-col gap-2 px-2 py-1.5\">\n <div className=\"flex items-center justify-between gap-2 text-sm\">\n <span className=\"font-semibold text-[var(--oh-foreground)]\">\n {t(I18nKey.CONVERSATION$CONTEXT_WINDOW)}\n </span>\n <span className={cn(\"shrink-0 text-xs\", TONE_LABEL_CLASS[tone])}>\n {usagePercentLabel}\n </span>\n </div>\n\n <button\n type=\"button\"\n data-testid=\"context-window-meter-bar-button\"\n className=\"relative h-1.5 w-full rounded-full cursor-pointer\"\n style={{ backgroundColor: CONTEXT_WINDOW_TRACK_COLOR }}\n aria-label={t(I18nKey.COMMON$USAGE)}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n openUsagePanel();\n }}\n >\n <span\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n TONE_BAR_CLASS[tone],\n )}\n style={{ width: `${Math.min(100, usagePercentage)}%` }}\n />\n </button>\n\n <div className=\"flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n data-testid=\"context-window-compact-button\"\n disabled={isDisabled}\n aria-busy={isCompacting}\n aria-label={t(I18nKey.CONVERSATION$COMPACT_CONTEXT)}\n className={cn(\n \"inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs\",\n \"text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]\",\n \"transition-colors disabled:cursor-not-allowed disabled:opacity-50\",\n )}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n handleCompact();\n }}\n >\n {isCompacting ? (\n <Loader2 className=\"size-3 animate-spin\" aria-hidden />\n ) : (\n <Minimize className=\"size-3\" aria-hidden />\n )}\n <span>{t(I18nKey.CONVERSATION$COMPACT_CONTEXT)}</span>\n </button>\n <span className=\"text-xs text-[var(--oh-muted)]\">\n {usageTokenSummary}\n </span>\n </div>\n </div>\n\n <Divider inset=\"menu\" />\n\n <ContextMenuListItem\n testId=\"context-window-plan-usage\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n openUsagePanel();\n }}\n >\n <ConversationNameContextMenuIconText\n icon={<Gauge size={16} />}\n text={t(I18nKey.COMMON$USAGE)}\n />\n </ContextMenuListItem>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/context-window-ring.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs"),t=require("../../conversation/usage-panel/context-meter.cjs");let n=require("react/jsx-runtime");var r=16,i=2,a=`color-mix(in srgb, var(--oh-foreground) ${.42100}%, transparent)`,o={neutral:`var(--oh-foreground)`,warning:`#f59e0b`,danger:`#ef4444`};function s({percentage:s,className:c}){let l=(r-i)/2,u=2Math.PIl,d=Math.min(100,Math.max(0,s)),f=u-d/100u,p=t.getContextFillTone(d);return(0,n.jsxs)(`svg`,{width:r,height:r,viewBox:`0 0 ${r} ${r}`,className:e.cn(`shrink-0`,c),"aria-hidden":!0,children:[(0,n.jsx)(`circle`,{cx:r/2,cy:r/2,r:l,fill:`none`,style:{stroke:a},strokeWidth:i,"data-testid":`context-window-ring-track`}),(0,n.jsx)(`circle`,{cx:r/2,cy:r/2,r:l,fill:`none`,stroke:o[p],strokeWidth:i,strokeLinecap:`round`,strokeDasharray:u,strokeDashoffset:f,transform:`rotate(-90 ${r/2} ${r/2})`,className:`transition-[stroke-dashoffset,stroke] duration-300`,"data-testid":`context-window-ring-arc`})]})}exports.CONTEXT_WINDOW_TRACK_COLOR=a,exports.ContextWindowRing=s;
2	+ //# sourceMappingURL=context-window-ring.cjs.map

package/dist/components/features/chat/components/context-window-ring.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context-window-ring.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/context-window-ring.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { getContextFillTone } from \"#/components/features/conversation/usage-panel/context-meter\";\n\nconst CONTEXT_WINDOW_RING_SIZE = 16;\nconst CONTEXT_WINDOW_RING_STROKE = 2;\n\n/**\n * Opacity of the ring's unfilled track, as a fraction of `--oh-foreground`.\n *\n * The track is derived from the foreground rather than pinned to a scale stop.\n * It carries information (the arc's proportion is only readable against it), so\n * it is a foreground element, and every stop in the surface family sits close\n * to the surfaces it delimits. Drawing it with `--oh-border` put it in that\n * family: it was 1.57:1 against the composer at rest, and the trigger's hover\n * fill resolves to the same stop, taking it to 1.00:1. No stop in that family\n * fixes it, and no fixed stop holds across the three palettes in\n * `color-themes.ts`, whose scales differ.\n *\n * Compositing the foreground over whatever the active theme paints keeps the\n * track between surface and arc by construction rather than by coincidence.\n * 42% is the value that maximises the worst case across the shipped palettes;\n * `context-window-ring.test.tsx` asserts it per theme.\n */\nexport const CONTEXT_WINDOW_RING_TRACK_ALPHA = 0.42;\n\n/** Shared by the ring's track and the popover's usage bar, which had the same defect. */\nexport const CONTEXT_WINDOW_TRACK_COLOR = `color-mix(in srgb, var(--oh-foreground) ${CONTEXT_WINDOW_RING_TRACK_ALPHA * 100}%, transparent)`;\n\nconst TONE_STROKE = {\n neutral: \"var(--oh-foreground)\",\n warning: \"#f59e0b\", // amber-500\n danger: \"#ef4444\", // red-500\n} as const;\n\ninterface ContextWindowRingProps {\n percentage: number;\n className?: string;\n}\n\nexport function ContextWindowRing({\n percentage,\n className,\n}: ContextWindowRingProps) {\n const radius = (CONTEXT_WINDOW_RING_SIZE - CONTEXT_WINDOW_RING_STROKE) / 2;\n const circumference = 2 * Math.PI * radius;\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n const dashOffset = circumference - (clampedPercentage / 100) * circumference;\n const tone = getContextFillTone(clampedPercentage);\n\n return (\n <svg\n width={CONTEXT_WINDOW_RING_SIZE}\n height={CONTEXT_WINDOW_RING_SIZE}\n viewBox={`0 0 ${CONTEXT_WINDOW_RING_SIZE} ${CONTEXT_WINDOW_RING_SIZE}`}\n className={cn(\"shrink-0\", className)}\n aria-hidden\n >\n <circle\n cx={CONTEXT_WINDOW_RING_SIZE / 2}\n cy={CONTEXT_WINDOW_RING_SIZE / 2}\n r={radius}\n fill=\"none\"\n style={{ stroke: CONTEXT_WINDOW_TRACK_COLOR }}\n strokeWidth={CONTEXT_WINDOW_RING_STROKE}\n data-testid=\"context-window-ring-track\"\n />\n <circle\n cx={CONTEXT_WINDOW_RING_SIZE / 2}\n cy={CONTEXT_WINDOW_RING_SIZE / 2}\n r={radius}\n fill=\"none\"\n stroke={TONE_STROKE[tone]}\n strokeWidth={CONTEXT_WINDOW_RING_STROKE}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n transform={`rotate(-90 ${CONTEXT_WINDOW_RING_SIZE / 2} ${CONTEXT_WINDOW_RING_SIZE / 2})`}\n className=\"transition-[stroke-dashoffset,stroke] duration-300\"\n data-testid=\"context-window-ring-arc\"\n />\n </svg>\n );\n}\n"],"mappings":"sMAGA,IAAM,EAA2B,GAC3B,EAA6B,EAsBtB,EAA6B,2CAA2C,IAAkC,IAAI,iBAErH,EAAc,CAClB,QAAS,uBACT,QAAS,UACT,OAAQ,SACV,EAOA,SAAgB,EAAkB,CAChC,aACA,aACyB,CACzB,IAAM,GAAU,EAA2B,GAA8B,EACnE,EAAgB,EAAI,KAAK,GAAK,EAC9B,EAAoB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAU,CAAC,EACzD,EAAa,EAAiB,EAAoB,IAAO,EACzD,EAAO,EAAA,mBAAmB,CAAiB,EAEjD,OACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAO,EACP,OAAQ,EACR,QAAS,OAAO,EAAyB,GAAG,IAC5C,UAAW,EAAA,GAAG,WAAY,CAAS,EACnC,cAAA,YALF,EAOE,EAAA,EAAA,KAAC,SAAD,CACE,GAAI,EAA2B,EAC/B,GAAI,EAA2B,EAC/B,EAAG,EACH,KAAK,OACL,MAAO,CAAE,OAAQ,CAA2B,EAC5C,YAAa,EACb,cAAY,2BACb,CAAA,GACD,EAAA,EAAA,KAAC,SAAD,CACE,GAAI,EAA2B,EAC/B,GAAI,EAA2B,EAC/B,EAAG,EACH,KAAK,OACL,OAAQ,EAAY,GACpB,YAAa,EACb,cAAc,QACd,gBAAiB,EACjB,iBAAkB,EAClB,UAAW,cAAc,EAA2B,EAAE,GAAG,EAA2B,EAAE,GACtF,UAAU,qDACV,cAAY,yBACb,CAAA,CACE,GAET"}

package/dist/components/features/chat/components/context-window-ring.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Opacity of the ring's unfilled track, as a fraction of `--oh-foreground`.
+ *
+ * The track is derived from the foreground rather than pinned to a scale stop.
+ * It carries information (the arc's proportion is only readable against it), so
+ * it is a foreground element, and every stop in the surface family sits close
+ * to the surfaces it delimits. Drawing it with `--oh-border` put it in that
+ * family: it was 1.57:1 against the composer at rest, and the trigger's hover
+ * fill resolves to the same stop, taking it to 1.00:1. No stop in that family
+ * fixes it, and no fixed stop holds across the three palettes in
+ * `color-themes.ts`, whose scales differ.
+ *
+ * Compositing the foreground over whatever the active theme paints keeps the
+ * track between surface and arc by construction rather than by coincidence.
+ * 42% is the value that maximises the worst case across the shipped palettes;
+ * `context-window-ring.test.tsx` asserts it per theme.
+ */
+export declare const CONTEXT_WINDOW_RING_TRACK_ALPHA = 0.42;
+/** Shared by the ring's track and the popover's usage bar, which had the same defect. */
+export declare const CONTEXT_WINDOW_TRACK_COLOR = "color-mix(in srgb, var(--oh-foreground) 42%, transparent)";
+interface ContextWindowRingProps {
+    percentage: number;
+    className?: string;
+}
+export declare function ContextWindowRing({ percentage, className, }: ContextWindowRingProps): import("react").JSX.Element;
+export {};

package/dist/components/features/chat/components/context-window-ring.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { cn as e } from "../../../../utils/utils.js";
+import { getContextFillTone as t } from "../../conversation/usage-panel/context-meter.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/features/chat/components/context-window-ring.tsx
+var i = 16, a = 2, o = `color-mix(in srgb, var(--oh-foreground) ${.42 * 100}%, transparent)`, s = {
+	neutral: "var(--oh-foreground)",
+	warning: "#f59e0b",
+	danger: "#ef4444"
+};
+function c({ percentage: c, className: l }) {
+	let u = (i - a) / 2, d = 2 * Math.PI * u, f = Math.min(100, Math.max(0, c)), p = d - f / 100 * d, m = t(f);
+	return /* @__PURE__ */ r("svg", {
+		width: i,
+		height: i,
+		viewBox: `0 0 ${i} ${i}`,
+		className: e("shrink-0", l),
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ n("circle", {
+			cx: i / 2,
+			cy: i / 2,
+			r: u,
+			fill: "none",
+			style: { stroke: o },
+			strokeWidth: a,
+			"data-testid": "context-window-ring-track"
+		}), /* @__PURE__ */ n("circle", {
+			cx: i / 2,
+			cy: i / 2,
+			r: u,
+			fill: "none",
+			stroke: s[m],
+			strokeWidth: a,
+			strokeLinecap: "round",
+			strokeDasharray: d,
+			strokeDashoffset: p,
+			transform: `rotate(-90 ${i / 2} ${i / 2})`,
+			className: "transition-[stroke-dashoffset,stroke] duration-300",
+			"data-testid": "context-window-ring-arc"
+		})]
+	});
+}
+//#endregion
+export { o as CONTEXT_WINDOW_TRACK_COLOR, c as ContextWindowRing };
+//# sourceMappingURL=context-window-ring.js.map

package/dist/components/features/chat/components/context-window-ring.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context-window-ring.js","names":[],"sources":["../../../../../src/components/features/chat/components/context-window-ring.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { getContextFillTone } from \"#/components/features/conversation/usage-panel/context-meter\";\n\nconst CONTEXT_WINDOW_RING_SIZE = 16;\nconst CONTEXT_WINDOW_RING_STROKE = 2;\n\n/**\n * Opacity of the ring's unfilled track, as a fraction of `--oh-foreground`.\n *\n * The track is derived from the foreground rather than pinned to a scale stop.\n * It carries information (the arc's proportion is only readable against it), so\n * it is a foreground element, and every stop in the surface family sits close\n * to the surfaces it delimits. Drawing it with `--oh-border` put it in that\n * family: it was 1.57:1 against the composer at rest, and the trigger's hover\n * fill resolves to the same stop, taking it to 1.00:1. No stop in that family\n * fixes it, and no fixed stop holds across the three palettes in\n * `color-themes.ts`, whose scales differ.\n *\n * Compositing the foreground over whatever the active theme paints keeps the\n * track between surface and arc by construction rather than by coincidence.\n * 42% is the value that maximises the worst case across the shipped palettes;\n * `context-window-ring.test.tsx` asserts it per theme.\n */\nexport const CONTEXT_WINDOW_RING_TRACK_ALPHA = 0.42;\n\n/** Shared by the ring's track and the popover's usage bar, which had the same defect. */\nexport const CONTEXT_WINDOW_TRACK_COLOR = `color-mix(in srgb, var(--oh-foreground) ${CONTEXT_WINDOW_RING_TRACK_ALPHA * 100}%, transparent)`;\n\nconst TONE_STROKE = {\n neutral: \"var(--oh-foreground)\",\n warning: \"#f59e0b\", // amber-500\n danger: \"#ef4444\", // red-500\n} as const;\n\ninterface ContextWindowRingProps {\n percentage: number;\n className?: string;\n}\n\nexport function ContextWindowRing({\n percentage,\n className,\n}: ContextWindowRingProps) {\n const radius = (CONTEXT_WINDOW_RING_SIZE - CONTEXT_WINDOW_RING_STROKE) / 2;\n const circumference = 2 * Math.PI * radius;\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n const dashOffset = circumference - (clampedPercentage / 100) * circumference;\n const tone = getContextFillTone(clampedPercentage);\n\n return (\n <svg\n width={CONTEXT_WINDOW_RING_SIZE}\n height={CONTEXT_WINDOW_RING_SIZE}\n viewBox={`0 0 ${CONTEXT_WINDOW_RING_SIZE} ${CONTEXT_WINDOW_RING_SIZE}`}\n className={cn(\"shrink-0\", className)}\n aria-hidden\n >\n <circle\n cx={CONTEXT_WINDOW_RING_SIZE / 2}\n cy={CONTEXT_WINDOW_RING_SIZE / 2}\n r={radius}\n fill=\"none\"\n style={{ stroke: CONTEXT_WINDOW_TRACK_COLOR }}\n strokeWidth={CONTEXT_WINDOW_RING_STROKE}\n data-testid=\"context-window-ring-track\"\n />\n <circle\n cx={CONTEXT_WINDOW_RING_SIZE / 2}\n cy={CONTEXT_WINDOW_RING_SIZE / 2}\n r={radius}\n fill=\"none\"\n stroke={TONE_STROKE[tone]}\n strokeWidth={CONTEXT_WINDOW_RING_STROKE}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n transform={`rotate(-90 ${CONTEXT_WINDOW_RING_SIZE / 2} ${CONTEXT_WINDOW_RING_SIZE / 2})`}\n className=\"transition-[stroke-dashoffset,stroke] duration-300\"\n data-testid=\"context-window-ring-arc\"\n />\n </svg>\n );\n}\n"],"mappings":";;;;AAGA,IAAM,IAA2B,IAC3B,IAA6B,GAsBtB,IAA6B,2CAA2C,MAAkC,IAAI,kBAErH,IAAc;CAClB,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAOA,SAAgB,EAAkB,EAChC,eACA,gBACyB;CACzB,IAAM,KAAU,IAA2B,KAA8B,GACnE,IAAgB,IAAI,KAAK,KAAK,GAC9B,IAAoB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAU,CAAC,GACzD,IAAa,IAAiB,IAAoB,MAAO,GACzD,IAAO,EAAmB,CAAiB;CAEjD,OACE,kBAAC,OAAD;EACE,OAAO;EACP,QAAQ;EACR,SAAS,OAAO,EAAyB,GAAG;EAC5C,WAAW,EAAG,YAAY,CAAS;EACnC,eAAA;YALF,CAOE,kBAAC,UAAD;GACE,IAAI,IAA2B;GAC/B,IAAI,IAA2B;GAC/B,GAAG;GACH,MAAK;GACL,OAAO,EAAE,QAAQ,EAA2B;GAC5C,aAAa;GACb,eAAY;EACb,CAAA,GACD,kBAAC,UAAD;GACE,IAAI,IAA2B;GAC/B,IAAI,IAA2B;GAC/B,GAAG;GACH,MAAK;GACL,QAAQ,EAAY;GACpB,aAAa;GACb,eAAc;GACd,iBAAiB;GACjB,kBAAkB;GAClB,WAAW,cAAc,IAA2B,EAAE,GAAG,IAA2B,EAAE;GACtF,WAAU;GACV,eAAY;EACb,CAAA,CACE;;AAET"}

package/dist/components/features/chat/custom-chat-input.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../stores/conversation-store.cjs"),r=require("../../../hooks/chat/use-chat-input-logic.cjs"),i=require("../../../hooks/chat/use-file-handling.cjs"),a=require("../../../hooks/chat/use-grip-resize.cjs"),o=require("../../../hooks/chat/use-chat-input-events.cjs"),s=require("../../../hooks/chat/use-chat-submission.cjs"),c=require("../../../hooks/chat/use-slash-command.cjs"),l=require("./components/chat-input-grip.cjs"),u=require("./components/chat-input-container.cjs"),d=require("./components/hidden-file-input.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({disabled:e=!1,isNewConversationPending:m=!1,hasStartedConversation:h,showButton:g=!0,onSubmit:_,onFocus:ee,onBlur:te,onFilesPaste:ne,className:v=``,buttonClassName:y=``}){let[b,x]=f.default.useState(!1),{submittedMessage:S,clearAllFiles:C,setShouldHideSuggestions:w,setSubmittedMessage:T,images:E,files:D}=n.useConversationStore(),O=e,k=(0,f.useRef)(_);(0,f.useEffect)(()=>{k.current=_},[_]),(0,f.useEffect)(()=>{!S||e||(k.current(S),T(null))},[S,e,T]);let{chatInputRef:A,messageToSend:j,checkIsContentEmpty:M,clearEmptyContentHandler:N,saveDraft:P}=r.useChatInputLogic(),F=f.default.useCallback(()=>{let e=A.current?.innerText??``,t=E.length>0||D.length>0;x(e.trim().length>0||t)},[A,E,D]),{fileInputRef:I,chatContainerRef:L,isDragOver:R,handleFileIconClick:z,handleFileInputChange:B,handleDragOver:V,handleDragLeave:re,handleDrop:H}=i.useFileHandling(ne),{gripRef:U,isGripVisible:W,isGripDragging:G,handleTopEdgeClick:K,smartResize:q,handleGripMouseDown:J,handleGripTouchStart:Y,increaseHeightForEmptyContent:X,resetManualResize:ie}=a.useGripResize(A,j),{handleSubmit:Z}=s.useChatSubmission(A,I,q,_,ie),Q=f.default.useCallback(()=>{Z(),F()},[Z,F]),{handleInput:ae,handlePaste:oe,handleKeyDown:se,handleBlur:ce,handleFocus:le}=o.useChatInputEvents(A,q,X,M,N,ee,te),{isMenuOpen:$,filteredItems:ue,selectedIndex:de,updateSlashMenu:fe,selectItem:pe,handleSlashKeyDown:me,closeMenu:he}=c.useSlashCommand(A);return(0,f.useEffect)(()=>()=>{w(!1),C()},[w,C]),(0,f.useEffect)(()=>{F()},[F,E.length,D.length]),(0,p.jsxs)(`div`,{className:t.cn(`w-full`,v),children:[(0,p.jsx)(d.HiddenFileInput,{fileInputRef:I,onChange:B}),(0,p.jsxs)(`div`,{className:`relative w-full`,children:[(0,p.jsx)(l.ChatInputGrip,{gripRef:U,isGripVisible:W,isGripDragging:G,handleTopEdgeClick:K,handleGripMouseDown:J,handleGripTouchStart:Y}),(0,p.jsx)(u.ChatInputContainer,{chatContainerRef:L,isDragOver:R,disabled:O,canSubmit:b,hasStartedConversation:h,isNewConversationPending:m,showButton:g,buttonClassName:y,chatInputRef:A,handleFileIconClick:z,handleSubmit:Q,onDragOver:V,onDragLeave:re,onDrop:H,onInput:()=>{ae(),fe(),P(),F()},onPaste:oe,onKeyDown:e=>{me(e)||se(e,O,Q)},onFocus:le,onBlur:()=>{ce(),he(),F()},isSlashMenuOpen:$,slashItems:ue,slashSelectedIndex:de,onSlashSelect:pe})]})]})}exports.CustomChatInput=m;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../stores/conversation-store.cjs"),r=require("../../../hooks/chat/use-chat-input-logic.cjs"),i=require("../../../hooks/chat/use-file-handling.cjs"),a=require("../../../hooks/chat/use-grip-resize.cjs"),o=require("../../../hooks/chat/use-chat-input-events.cjs"),s=require("../../../hooks/chat/use-chat-submission.cjs"),c=require("../../../hooks/chat/use-slash-command.cjs"),l=require("./components/chat-input-grip.cjs"),u=require("./components/chat-input-container.cjs"),d=require("./components/hidden-file-input.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({disabled:e=!1,isNewConversationPending:m=!1,hasStartedConversation:h,showButton:g=!0,onSubmit:_,onFocus:ee,onBlur:te,onFilesPaste:ne,className:v=``,buttonClassName:y=``}){let[b,x]=f.default.useState(!1),{submittedMessage:S,clearAllFiles:C,setShouldHideSuggestions:w,setSubmittedMessage:T,images:E,files:D}=n.useConversationStore(),O=e,k=(0,f.useRef)(_);(0,f.useEffect)(()=>{k.current=_},[_]),(0,f.useEffect)(()=>{!S||e||(k.current(S),T(null))},[S,e,T]);let{chatInputRef:A,messageToSend:j,checkIsContentEmpty:M,clearEmptyContentHandler:N,saveDraft:P}=r.useChatInputLogic(),F=f.default.useCallback(()=>{let e=A.current?.innerText??``,t=E.length>0||D.length>0;x(e.trim().length>0||t)},[A,E,D]),{fileInputRef:I,chatContainerRef:L,isDragOver:R,handleFileIconClick:z,handleFileInputChange:B,handleDragOver:V,handleDragLeave:re,handleDrop:H}=i.useFileHandling(ne),{gripRef:U,isGripVisible:W,isGripDragging:G,canResize:K,handleTopEdgeClick:q,smartResize:J,handleGripMouseDown:Y,handleGripTouchStart:X,increaseHeightForEmptyContent:ie,resetManualResize:ae}=a.useGripResize(A,j),{handleSubmit:Z}=s.useChatSubmission(A,I,J,_,ae),Q=f.default.useCallback(()=>{Z(),F()},[Z,F]),{handleInput:oe,handlePaste:$,handleKeyDown:se,handleBlur:ce,handleFocus:le}=o.useChatInputEvents(A,J,ie,M,N,ee,te),{isMenuOpen:ue,filteredItems:de,selectedIndex:fe,updateSlashMenu:pe,selectItem:me,handleSlashKeyDown:he,closeMenu:ge}=c.useSlashCommand(A);return(0,f.useEffect)(()=>()=>{w(!1),C()},[w,C]),(0,f.useEffect)(()=>{F()},[F,E.length,D.length]),(0,p.jsxs)(`div`,{className:t.cn(`w-full`,v),children:[(0,p.jsx)(d.HiddenFileInput,{fileInputRef:I,onChange:B}),(0,p.jsxs)(`div`,{className:`relative w-full`,children:[(0,p.jsx)(l.ChatInputGrip,{gripRef:U,isGripVisible:W,isGripDragging:G,canResize:K,handleTopEdgeClick:q,handleGripMouseDown:Y,handleGripTouchStart:X}),(0,p.jsx)(u.ChatInputContainer,{chatContainerRef:L,isDragOver:R,disabled:O,canSubmit:b,hasStartedConversation:h,isNewConversationPending:m,showButton:g,buttonClassName:y,chatInputRef:A,handleFileIconClick:z,handleSubmit:Q,onDragOver:V,onDragLeave:re,onDrop:H,onInput:()=>{oe(),pe(),P(),F()},onPaste:$,onKeyDown:e=>{he(e)||se(e,O,Q)},onFocus:le,onBlur:()=>{ce(),ge(),F()},isSlashMenuOpen:ue,slashItems:de,slashSelectedIndex:fe,onSlashSelect:me})]})]})}exports.CustomChatInput=m;
 //# sourceMappingURL=custom-chat-input.cjs.map

package/dist/components/features/chat/custom-chat-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-chat-input.cjs","names":[],"sources":["../../../../src/components/features/chat/custom-chat-input.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useChatInputLogic } from \"#/hooks/chat/use-chat-input-logic\";\nimport { useFileHandling } from \"#/hooks/chat/use-file-handling\";\nimport { useGripResize } from \"#/hooks/chat/use-grip-resize\";\nimport { useChatInputEvents } from \"#/hooks/chat/use-chat-input-events\";\nimport { useChatSubmission } from \"#/hooks/chat/use-chat-submission\";\nimport { useSlashCommand } from \"#/hooks/chat/use-slash-command\";\nimport { ChatInputGrip } from \"./components/chat-input-grip\";\nimport { ChatInputContainer } from \"./components/chat-input-container\";\nimport { HiddenFileInput } from \"./components/hidden-file-input\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface CustomChatInputProps {\n disabled?: boolean;\n isNewConversationPending?: boolean;\n hasStartedConversation?: boolean;\n showButton?: boolean;\n onSubmit: (message: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n onFilesPaste?: (\n files: File[],\n options?: import(\"#/hooks/chat/use-chat-attachment-upload\").ChatAttachmentUploadOptions,\n ) => void;\n className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n buttonClassName?: React.HTMLAttributes<HTMLButtonElement>[\"className\"];\n}\n\nexport function CustomChatInput({\n disabled = false,\n isNewConversationPending = false,\n hasStartedConversation,\n showButton = true,\n onSubmit,\n onFocus,\n onBlur,\n onFilesPaste,\n className = \"\",\n buttonClassName = \"\",\n}: CustomChatInputProps) {\n const [canSubmit, setCanSubmit] = React.useState(false);\n const {\n submittedMessage,\n clearAllFiles,\n setShouldHideSuggestions,\n setSubmittedMessage,\n images,\n files,\n } = useConversationStore();\n\n // Note: we intentionally do NOT disable the input when the conversation is\n // in an ERROR/STUCK execution state. Users should be able to send a follow-up\n // message to recover the conversation; the message will be delivered\n // immediately via the WebSocket if connected, or queued via REST otherwise.\n const isDisabled = disabled;\n\n // Always call the latest `onSubmit` without making the effect re-run when\n // its identity changes. `onSubmit` (typically `handleSendMessage`) is a\n // fresh function on every parent render, and the parent re-renders\n // whenever the pending-message queue updates synchronously inside\n // `onSubmit` itself. Listing it in the dep array caused the effect to\n // fire twice — once for the original submit and again from the\n // mid-submit re-render, before `setSubmittedMessage(null)` was applied —\n // producing a duplicate \"Sending…\" bubble.\n const onSubmitRef = useRef(onSubmit);\n useEffect(() => {\n onSubmitRef.current = onSubmit;\n }, [onSubmit]);\n\n // Listen to submittedMessage state changes\n useEffect(() => {\n if (!submittedMessage \|\| disabled) {\n return;\n }\n onSubmitRef.current(submittedMessage);\n setSubmittedMessage(null);\n }, [submittedMessage, disabled, setSubmittedMessage]);\n\n // Custom hooks\n const {\n chatInputRef,\n messageToSend,\n checkIsContentEmpty,\n clearEmptyContentHandler,\n saveDraft,\n } = useChatInputLogic();\n\n const syncCanSubmit = React.useCallback(() => {\n const text = chatInputRef.current?.innerText ?? \"\";\n const hasAttachments = images.length > 0 \|\| files.length > 0;\n setCanSubmit(text.trim().length > 0 \|\| hasAttachments);\n }, [chatInputRef, images, files]);\n\n const {\n fileInputRef,\n chatContainerRef,\n isDragOver,\n handleFileIconClick,\n handleFileInputChange,\n handleDragOver,\n handleDragLeave,\n handleDrop,\n } = useFileHandling(onFilesPaste);\n\n const {\n gripRef,\n isGripVisible,\n isGripDragging,\n handleTopEdgeClick,\n smartResize,\n handleGripMouseDown,\n handleGripTouchStart,\n increaseHeightForEmptyContent,\n resetManualResize,\n } = useGripResize(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n messageToSend,\n );\n\n const { handleSubmit } = useChatSubmission(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n fileInputRef as React.RefObject<HTMLInputElement \| null>,\n smartResize,\n onSubmit,\n resetManualResize,\n );\n const handleSubmitAndSync = React.useCallback(() => {\n handleSubmit();\n syncCanSubmit();\n }, [handleSubmit, syncCanSubmit]);\n\n const { handleInput, handlePaste, handleKeyDown, handleBlur, handleFocus } =\n useChatInputEvents(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n smartResize,\n increaseHeightForEmptyContent,\n checkIsContentEmpty,\n clearEmptyContentHandler,\n onFocus,\n onBlur,\n );\n\n const {\n isMenuOpen: isSlashMenuOpen,\n filteredItems: slashItems,\n selectedIndex: slashSelectedIndex,\n updateSlashMenu,\n selectItem: selectSlashItem,\n handleSlashKeyDown,\n closeMenu: closeSlashMenu,\n } = useSlashCommand(chatInputRef as React.RefObject<HTMLDivElement \| null>);\n\n // Cleanup: reset suggestions visibility when component unmounts\n useEffect(\n () => () => {\n setShouldHideSuggestions(false);\n clearAllFiles();\n },\n [setShouldHideSuggestions, clearAllFiles],\n );\n useEffect(() => {\n syncCanSubmit();\n }, [syncCanSubmit, images.length, files.length]);\n return (\n <div className={cn(\"w-full\", className)}>\n {/* Hidden file input /}\n <HiddenFileInput\n fileInputRef={fileInputRef}\n onChange={handleFileInputChange}\n />\n\n {/ Container with grip */}\n <div className=\"relative w-full\">\n <ChatInputGrip\n gripRef={gripRef}\n isGripVisible={isGripVisible}\n isGripDragging={isGripDragging}\n handleTopEdgeClick={handleTopEdgeClick}\n handleGripMouseDown={handleGripMouseDown}\n handleGripTouchStart={handleGripTouchStart}\n />\n\n <ChatInputContainer\n chatContainerRef={chatContainerRef}\n isDragOver={isDragOver}\n disabled={isDisabled}\n canSubmit={canSubmit}\n hasStartedConversation={hasStartedConversation}\n isNewConversationPending={isNewConversationPending}\n showButton={showButton}\n buttonClassName={buttonClassName}\n chatInputRef={chatInputRef}\n handleFileIconClick={handleFileIconClick}\n handleSubmit={handleSubmitAndSync}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n onInput={() => {\n handleInput();\n updateSlashMenu();\n saveDraft();\n syncCanSubmit();\n }}\n onPaste={handlePaste}\n onKeyDown={(e) => {\n if (handleSlashKeyDown(e)) return;\n handleKeyDown(e, isDisabled, handleSubmitAndSync);\n }}\n onFocus={handleFocus}\n onBlur={() => {\n handleBlur();\n closeSlashMenu();\n syncCanSubmit();\n }}\n isSlashMenuOpen={isSlashMenuOpen}\n slashItems={slashItems}\n slashSelectedIndex={slashSelectedIndex}\n onSlashSelect={selectSlashItem}\n />\n </div>\n </div>\n );\n}\n"],"mappings":"ksBA6BA,SAAgB,EAAgB,CAC9B,WAAW,GACX,2BAA2B,GAC3B,yBACA,aAAa,GACb,WACA,WACA,UACA,gBACA,YAAY,GACZ,kBAAkB,IACK,CACvB,GAAM,CAAC,EAAW,GAAgB,EAAA,QAAM,SAAS,EAAK,EAChD,CACJ,mBACA,gBACA,2BACA,sBACA,SACA,SACE,EAAA,qBAAqB,EAMnB,EAAa,EAUb,GAAA,EAAA,EAAA,QAAqB,CAAQ,GACnC,EAAA,EAAA,eAAgB,CACd,EAAY,QAAU,CACxB,EAAG,CAAC,CAAQ,CAAC,GAGb,EAAA,EAAA,eAAgB,CACV,CAAC,GAAoB,IAGzB,EAAY,QAAQ,CAAgB,EACpC,EAAoB,IAAI,EAC1B,EAAG,CAAC,EAAkB,EAAU,CAAmB,CAAC,EAGpD,GAAM,CACJ,eACA,gBACA,sBACA,2BACA,aACE,EAAA,kBAAkB,EAEhB,EAAgB,EAAA,QAAM,gBAAkB,CAC5C,IAAM,EAAO,EAAa,SAAS,WAAa,GAC1C,EAAiB,EAAO,OAAS,GAAK,EAAM,OAAS,EAC3D,EAAa,EAAK,KAAK,EAAE,OAAS,GAAK,CAAc,CACvD,EAAG,CAAC,EAAc,EAAQ,CAAK,CAAC,EAE1B,CACJ,eACA,mBACA,aACA,sBACA,wBACA,iBACA,mBACA,cACE,EAAA,gBAAgB,EAAY,EAE1B,CACJ,UACA,gBACA,iBACA,qBACA,cACA,sBACA,uBACA,~~gCACA~~,sBACE,EAAA,cACF,EACA,CACF,EAEM,CAAE,gBAAiB,EAAA,kBACvB,EACA,EACA,EACA,EACA,EACF,EACM,EAAsB,EAAA,QAAM,gBAAkB,CAClD,EAAa,EACb,EAAc,CAChB,EAAG,CAAC,EAAc,CAAa,CAAC,EAE1B,CAAE,eAAa,~~eAAa~~,iBAAe,cAAY,gBAC3D,EAAA,mBACE,EACA,EACA,~~EACA~~,EACA,EACA,GACA,EACF,EAEI,CACJ,WAAY,~~EACZ~~,cAAe,GACf,cAAe,GACf,mBACA,WAAY,GACZ,sBACA,UAAW,IACT,EAAA,gBAAgB,CAAsD,EAa1E,OAVA,EAAA,EAAA,mBACc,CACV,EAAyB,EAAK,EAC9B,EAAc,CAChB,EACA,CAAC,EAA0B,CAAa,CAC1C,GACA,EAAA,EAAA,eAAgB,CACd,EAAc,CAChB,EAAG,CAAC,EAAe,EAAO,OAAQ,EAAM,MAAM,CAAC,GAE7C,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,GAAG,SAAU,CAAS,WAAtC,EAEE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACgB,eACd,SAAU,CACX,CAAA,GAGD,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2BAAf,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACM,gBACC,~~iBACI~~,qBACC,sBACC,sBACvB,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,mBAAD,CACoB,mBACN,aACZ,SAAU,EACC,YACa,yBACE,2BACd,aACK,kBACH,eACO,sBACrB,aAAc,EACd,WAAY,EACZ,YAAa,GACb,OAAQ,EACR,YAAe,CACb,GAAY,EACZ,GAAgB,EAChB,EAAU,EACV,EAAc,CAChB,EACA,QAAS,~~GACT~~,UAAY,GAAM,CACZ,GAAmB,CAAC,GACxB,GAAc,EAAG,EAAY,CAAmB,CAClD,EACA,QAAS,GACT,WAAc,CACZ,GAAW,EACX,GAAe,EACf,EAAc,CAChB,EACiB,~~kBACL~~,cACQ,sBACpB,cAAe,EAChB,CAAA,CACE,GACF,GAET"}
1	+ {"version":3,"file":"custom-chat-input.cjs","names":[],"sources":["../../../../src/components/features/chat/custom-chat-input.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useChatInputLogic } from \"#/hooks/chat/use-chat-input-logic\";\nimport { useFileHandling } from \"#/hooks/chat/use-file-handling\";\nimport { useGripResize } from \"#/hooks/chat/use-grip-resize\";\nimport { useChatInputEvents } from \"#/hooks/chat/use-chat-input-events\";\nimport { useChatSubmission } from \"#/hooks/chat/use-chat-submission\";\nimport { useSlashCommand } from \"#/hooks/chat/use-slash-command\";\nimport { ChatInputGrip } from \"./components/chat-input-grip\";\nimport { ChatInputContainer } from \"./components/chat-input-container\";\nimport { HiddenFileInput } from \"./components/hidden-file-input\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface CustomChatInputProps {\n disabled?: boolean;\n isNewConversationPending?: boolean;\n hasStartedConversation?: boolean;\n showButton?: boolean;\n onSubmit: (message: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n onFilesPaste?: (\n files: File[],\n options?: import(\"#/hooks/chat/use-chat-attachment-upload\").ChatAttachmentUploadOptions,\n ) => void;\n className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n buttonClassName?: React.HTMLAttributes<HTMLButtonElement>[\"className\"];\n}\n\nexport function CustomChatInput({\n disabled = false,\n isNewConversationPending = false,\n hasStartedConversation,\n showButton = true,\n onSubmit,\n onFocus,\n onBlur,\n onFilesPaste,\n className = \"\",\n buttonClassName = \"\",\n}: CustomChatInputProps) {\n const [canSubmit, setCanSubmit] = React.useState(false);\n const {\n submittedMessage,\n clearAllFiles,\n setShouldHideSuggestions,\n setSubmittedMessage,\n images,\n files,\n } = useConversationStore();\n\n // Note: we intentionally do NOT disable the input when the conversation is\n // in an ERROR/STUCK execution state. Users should be able to send a follow-up\n // message to recover the conversation; the message will be delivered\n // immediately via the WebSocket if connected, or queued via REST otherwise.\n const isDisabled = disabled;\n\n // Always call the latest `onSubmit` without making the effect re-run when\n // its identity changes. `onSubmit` (typically `handleSendMessage`) is a\n // fresh function on every parent render, and the parent re-renders\n // whenever the pending-message queue updates synchronously inside\n // `onSubmit` itself. Listing it in the dep array caused the effect to\n // fire twice — once for the original submit and again from the\n // mid-submit re-render, before `setSubmittedMessage(null)` was applied —\n // producing a duplicate \"Sending…\" bubble.\n const onSubmitRef = useRef(onSubmit);\n useEffect(() => {\n onSubmitRef.current = onSubmit;\n }, [onSubmit]);\n\n // Listen to submittedMessage state changes\n useEffect(() => {\n if (!submittedMessage \|\| disabled) {\n return;\n }\n onSubmitRef.current(submittedMessage);\n setSubmittedMessage(null);\n }, [submittedMessage, disabled, setSubmittedMessage]);\n\n // Custom hooks\n const {\n chatInputRef,\n messageToSend,\n checkIsContentEmpty,\n clearEmptyContentHandler,\n saveDraft,\n } = useChatInputLogic();\n\n const syncCanSubmit = React.useCallback(() => {\n const text = chatInputRef.current?.innerText ?? \"\";\n const hasAttachments = images.length > 0 \|\| files.length > 0;\n setCanSubmit(text.trim().length > 0 \|\| hasAttachments);\n }, [chatInputRef, images, files]);\n\n const {\n fileInputRef,\n chatContainerRef,\n isDragOver,\n handleFileIconClick,\n handleFileInputChange,\n handleDragOver,\n handleDragLeave,\n handleDrop,\n } = useFileHandling(onFilesPaste);\n\n const {\n gripRef,\n isGripVisible,\n isGripDragging,\n canResize,\n handleTopEdgeClick,\n smartResize,\n handleGripMouseDown,\n handleGripTouchStart,\n increaseHeightForEmptyContent,\n resetManualResize,\n } = useGripResize(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n messageToSend,\n );\n\n const { handleSubmit } = useChatSubmission(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n fileInputRef as React.RefObject<HTMLInputElement \| null>,\n smartResize,\n onSubmit,\n resetManualResize,\n );\n const handleSubmitAndSync = React.useCallback(() => {\n handleSubmit();\n syncCanSubmit();\n }, [handleSubmit, syncCanSubmit]);\n\n const { handleInput, handlePaste, handleKeyDown, handleBlur, handleFocus } =\n useChatInputEvents(\n chatInputRef as React.RefObject<HTMLDivElement \| null>,\n smartResize,\n increaseHeightForEmptyContent,\n checkIsContentEmpty,\n clearEmptyContentHandler,\n onFocus,\n onBlur,\n );\n\n const {\n isMenuOpen: isSlashMenuOpen,\n filteredItems: slashItems,\n selectedIndex: slashSelectedIndex,\n updateSlashMenu,\n selectItem: selectSlashItem,\n handleSlashKeyDown,\n closeMenu: closeSlashMenu,\n } = useSlashCommand(chatInputRef as React.RefObject<HTMLDivElement \| null>);\n\n // Cleanup: reset suggestions visibility when component unmounts\n useEffect(\n () => () => {\n setShouldHideSuggestions(false);\n clearAllFiles();\n },\n [setShouldHideSuggestions, clearAllFiles],\n );\n useEffect(() => {\n syncCanSubmit();\n }, [syncCanSubmit, images.length, files.length]);\n return (\n <div className={cn(\"w-full\", className)}>\n {/* Hidden file input /}\n <HiddenFileInput\n fileInputRef={fileInputRef}\n onChange={handleFileInputChange}\n />\n\n {/ Container with grip */}\n <div className=\"relative w-full\">\n <ChatInputGrip\n gripRef={gripRef}\n isGripVisible={isGripVisible}\n isGripDragging={isGripDragging}\n canResize={canResize}\n handleTopEdgeClick={handleTopEdgeClick}\n handleGripMouseDown={handleGripMouseDown}\n handleGripTouchStart={handleGripTouchStart}\n />\n\n <ChatInputContainer\n chatContainerRef={chatContainerRef}\n isDragOver={isDragOver}\n disabled={isDisabled}\n canSubmit={canSubmit}\n hasStartedConversation={hasStartedConversation}\n isNewConversationPending={isNewConversationPending}\n showButton={showButton}\n buttonClassName={buttonClassName}\n chatInputRef={chatInputRef}\n handleFileIconClick={handleFileIconClick}\n handleSubmit={handleSubmitAndSync}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n onInput={() => {\n handleInput();\n updateSlashMenu();\n saveDraft();\n syncCanSubmit();\n }}\n onPaste={handlePaste}\n onKeyDown={(e) => {\n if (handleSlashKeyDown(e)) return;\n handleKeyDown(e, isDisabled, handleSubmitAndSync);\n }}\n onFocus={handleFocus}\n onBlur={() => {\n handleBlur();\n closeSlashMenu();\n syncCanSubmit();\n }}\n isSlashMenuOpen={isSlashMenuOpen}\n slashItems={slashItems}\n slashSelectedIndex={slashSelectedIndex}\n onSlashSelect={selectSlashItem}\n />\n </div>\n </div>\n );\n}\n"],"mappings":"ksBA6BA,SAAgB,EAAgB,CAC9B,WAAW,GACX,2BAA2B,GAC3B,yBACA,aAAa,GACb,WACA,WACA,UACA,gBACA,YAAY,GACZ,kBAAkB,IACK,CACvB,GAAM,CAAC,EAAW,GAAgB,EAAA,QAAM,SAAS,EAAK,EAChD,CACJ,mBACA,gBACA,2BACA,sBACA,SACA,SACE,EAAA,qBAAqB,EAMnB,EAAa,EAUb,GAAA,EAAA,EAAA,QAAqB,CAAQ,GACnC,EAAA,EAAA,eAAgB,CACd,EAAY,QAAU,CACxB,EAAG,CAAC,CAAQ,CAAC,GAGb,EAAA,EAAA,eAAgB,CACV,CAAC,GAAoB,IAGzB,EAAY,QAAQ,CAAgB,EACpC,EAAoB,IAAI,EAC1B,EAAG,CAAC,EAAkB,EAAU,CAAmB,CAAC,EAGpD,GAAM,CACJ,eACA,gBACA,sBACA,2BACA,aACE,EAAA,kBAAkB,EAEhB,EAAgB,EAAA,QAAM,gBAAkB,CAC5C,IAAM,EAAO,EAAa,SAAS,WAAa,GAC1C,EAAiB,EAAO,OAAS,GAAK,EAAM,OAAS,EAC3D,EAAa,EAAK,KAAK,EAAE,OAAS,GAAK,CAAc,CACvD,EAAG,CAAC,EAAc,EAAQ,CAAK,CAAC,EAE1B,CACJ,eACA,mBACA,aACA,sBACA,wBACA,iBACA,mBACA,cACE,EAAA,gBAAgB,EAAY,EAE1B,CACJ,UACA,gBACA,iBACA,YACA,qBACA,cACA,sBACA,uBACA,iCACA,sBACE,EAAA,cACF,EACA,CACF,EAEM,CAAE,gBAAiB,EAAA,kBACvB,EACA,EACA,EACA,EACA,EACF,EACM,EAAsB,EAAA,QAAM,gBAAkB,CAClD,EAAa,EACb,EAAc,CAChB,EAAG,CAAC,EAAc,CAAa,CAAC,EAE1B,CAAE,eAAa,cAAa,iBAAe,cAAY,gBAC3D,EAAA,mBACE,EACA,EACA,GACA,EACA,EACA,GACA,EACF,EAEI,CACJ,WAAY,GACZ,cAAe,GACf,cAAe,GACf,mBACA,WAAY,GACZ,sBACA,UAAW,IACT,EAAA,gBAAgB,CAAsD,EAa1E,OAVA,EAAA,EAAA,mBACc,CACV,EAAyB,EAAK,EAC9B,EAAc,CAChB,EACA,CAAC,EAA0B,CAAa,CAC1C,GACA,EAAA,EAAA,eAAgB,CACd,EAAc,CAChB,EAAG,CAAC,EAAe,EAAO,OAAQ,EAAM,MAAM,CAAC,GAE7C,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,GAAG,SAAU,CAAS,WAAtC,EAEE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACgB,eACd,SAAU,CACX,CAAA,GAGD,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2BAAf,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACM,gBACC,iBACL,YACS,qBACC,sBACC,sBACvB,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,mBAAD,CACoB,mBACN,aACZ,SAAU,EACC,YACa,yBACE,2BACd,aACK,kBACH,eACO,sBACrB,aAAc,EACd,WAAY,EACZ,YAAa,GACb,OAAQ,EACR,YAAe,CACb,GAAY,EACZ,GAAgB,EAChB,EAAU,EACV,EAAc,CAChB,EACA,QAAS,EACT,UAAY,GAAM,CACZ,GAAmB,CAAC,GACxB,GAAc,EAAG,EAAY,CAAmB,CAClD,EACA,QAAS,GACT,WAAc,CACZ,GAAW,EACX,GAAe,EACf,EAAc,CAChB,EACiB,mBACL,cACQ,sBACpB,cAAe,EAChB,CAAA,CACE,GACF,GAET"}