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

@openhands/agent-canvas 1.13.0 → 1.15.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 (1688) hide show

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-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/globe.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),o=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../utils/dropdown-classes.cjs"),p=require("../../../../ui/context-menu.cjs"),m=require("../../../../hooks/use-click-outside-element.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../context-menu/archived-disabled-tooltip.cjs"),v=require("../../../../hooks/use-is-archived-conversation.cjs"),y=require("../../../../icons/double-check.cjs"),b=require("../../../../icons/pill.cjs"),x=require("../../../../icons/pill-fill.cjs"),S=require("../../../../hooks/use-task-list.cjs");let C=require("react");C=e.__toESM(C,1);let w=require("react/jsx-runtime"),T=require("react-dom");T=e.__toESM(T,1);function E({isOpen:e,onClose:E,ignoreOutsideClickRef:D,anchorRef:O}){let k=m.useClickOutsideElement(E,D),[A,j]=(0,C.useState)();(0,C.useLayoutEffect)(()=>{if(!e||!O?.current){j(void 0);return}let t=()=>{let e=O.current?.getBoundingClientRect();e&&j({position:`fixed`,zIndex:9999,top:e.bottom+8,left:e.left})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[e,O]);let{t:M}=t.useTranslation(`openhands`),{conversationId:N}=c.useConversationId(),{state:P,setUnpinnedTabs:F,setSelectedTab:I}=l.useConversationLocalStorageState(N),{selectedTab:L,isRightPanelShown:R,setSelectedTab:z}=u.useConversationStore(),{navigateToTab:B}=h.useSelectConversationTab(),{hasTaskList:V}=S.useTaskList(),{backend:H}=d.useActiveBackend(),U=v.useIsArchivedConversation(),W=[{tab:`planner`,icon:a.ListTodo,i18nKey:n.I18nKey.COMMON$PLANNER},{tab:`files`,icon:g.default,i18nKey:n.I18nKey.COMMON$FILES},{tab:`terminal`,icon:o.SquareChevronRight,i18nKey:n.I18nKey.COMMON$TERMINAL},{tab:`browser`,icon:i.Globe,i18nKey:n.I18nKey.COMMON$BROWSER},{tab:`usage`,icon:r.Gauge,i18nKey:n.I18nKey.COMMON$USAGE}];V&&W.unshift({tab:`tasklist`,icon:y.default,i18nKey:n.I18nKey.COMMON$TASK_LIST});let G=W.filter(({tab:e})=>e!==`planner`||H.kind===`cloud`),K=e=>{U||(B(e),E())},q=(e,t)=>{if(U){t.preventDefault(),t.stopPropagation();return}if(t.preventDefault(),t.stopPropagation(),P.unpinnedTabs.includes(e))F(P.unpinnedTabs.filter(t=>t!==e));else{let t=[...P.unpinnedTabs,e];if(F(t),L===e&&R){let n=G.find(({tab:n})=>n!==e&&!t.includes(n));n&&(z(n.tab),I(n.tab))}}};if(!e)return null;let J=!!(O?.current&&A),Y=(0,w.jsx)(p.ContextMenu,{ref:k,theme:J?`popover`:`default`,position:J?`none`:`bottom`,alignment:J?`none`:`left`,spacing:J?`none`:`default`,className:s.cn(`z-[9999] w-fit`,J?`mt-0`:`mt-2`),children:G.map(({tab:e,icon:t,i18nKey:r})=>{let i=!P.unpinnedTabs.includes(e);return(0,w.jsx)(`li`,{className:`list-none`,children:(0,w.jsx)(_.ArchivedDisabledTooltip,{isDisabled:U,children:(0,w.jsxs)(`div`,{className:s.cn(`group flex h-[30px] w-full min-w-0 items-stretch rounded`,!U&&`hover:bg-[var(--oh-interactive-hover)]`,U&&`opacity-50`),children:[(0,w.jsxs)(`button`,{type:`button`,"data-testid":`conversation-tabs-menu-open-${e}`,disabled:U,className:s.cn(`flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white`,f.dropdownInstantColorClassName,U?`cursor-not-allowed`:`cursor-pointer`),onClick:()=>K(e),children:[(0,w.jsx)(`span`,{className:f.dropdownMenuRowIconWrapperClassName,"aria-hidden":!0,children:(0,w.jsx)(t,{className:`h-4 w-4`})}),(0,w.jsx)(`span`,{className:`text-sm`,children:M(r)})]}),(0,w.jsx)(`button`,{type:`button`,"data-testid":`conversation-tabs-menu-pin-${e}`,disabled:U,className:s.cn(`flex shrink-0 items-center justify-center rounded-r px-2 text-white`,f.dropdownInstantColorClassName,U?`cursor-not-allowed`:`cursor-pointer hover:bg-white/10`),"aria-pressed":i,"aria-label":M(i?n.I18nKey.CONVERSATION$UNPIN_TAB:n.I18nKey.CONVERSATION$PIN_TAB),onClick:t=>q(e,t),children:i?(0,w.jsx)(`span`,{className:s.cn(`-mr-[5px] ml-auto`,f.dropdownMenuRowIconWrapperClassName),"aria-hidden":!0,children:(0,w.jsx)(x.default,{className:`h-7 w-7`})}):(0,w.jsx)(`span`,{className:s.cn(`ml-auto`,f.dropdownMenuRowIconWrapperClassName),"aria-hidden":!0,children:(0,w.jsx)(b.default,{className:`h-4.5 w-4.5`})})})]})})},e)})});return J&&A&&typeof document<`u`?T.default.createPortal((0,w.jsx)(`div`,{style:A,children:Y}),document.body):Y}exports.ConversationTabsContextMenu=E;
+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/globe.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),o=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../utils/dropdown-classes.cjs"),p=require("../../../../ui/context-menu.cjs"),m=require("../../../../hooks/use-click-outside-element.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../context-menu/archived-disabled-tooltip.cjs"),v=require("../../../../hooks/use-is-archived-conversation.cjs"),y=require("../../../../node_modules/react-icons/lu/index.cjs"),b=require("../../../../icons/pill.cjs"),x=require("../../../../icons/pill-fill.cjs"),S=require("../../../../icons/double-check.cjs"),C=require("../../../../hooks/use-task-list.cjs");let w=require("react");w=e.__toESM(w,1);let T=require("react/jsx-runtime"),E=require("react-dom");E=e.__toESM(E,1);function D({isOpen:e,onClose:D,ignoreOutsideClickRef:O,anchorRef:k}){let A=m.useClickOutsideElement(D,O),[j,M]=(0,w.useState)();(0,w.useLayoutEffect)(()=>{if(!e||!k?.current){M(void 0);return}let t=()=>{let e=k.current?.getBoundingClientRect();e&&M({position:`fixed`,zIndex:9999,top:e.bottom+8,left:e.left})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[e,k]);let{t:N}=t.useTranslation(`openhands`),{conversationId:P}=c.useConversationId(),{state:F,setUnpinnedTabs:I,setSelectedTab:L}=l.useConversationLocalStorageState(P),{selectedTab:R,isRightPanelShown:z,setSelectedTab:B}=u.useConversationStore(),{navigateToTab:V}=h.useSelectConversationTab(),{hasTaskList:H}=C.useTaskList(),{backend:U}=d.useActiveBackend(),W=v.useIsArchivedConversation(),G=[{tab:`planner`,icon:a.ListTodo,i18nKey:n.I18nKey.COMMON$PLANNER},{tab:`files`,icon:g.default,i18nKey:n.I18nKey.COMMON$FILES},{tab:`commits`,icon:y.LuFileDiff,i18nKey:n.I18nKey.DIFF_VIEWER$COMMITS},{tab:`terminal`,icon:o.SquareChevronRight,i18nKey:n.I18nKey.COMMON$TERMINAL},{tab:`browser`,icon:i.Globe,i18nKey:n.I18nKey.COMMON$BROWSER},{tab:`usage`,icon:r.Gauge,i18nKey:n.I18nKey.COMMON$USAGE}];H&&G.unshift({tab:`tasklist`,icon:S.default,i18nKey:n.I18nKey.COMMON$TASK_LIST});let K=G.filter(({tab:e})=>e!==`planner`||U.kind===`cloud`),q=e=>{W||(V(e),D())},J=(e,t)=>{if(W){t.preventDefault(),t.stopPropagation();return}if(t.preventDefault(),t.stopPropagation(),F.unpinnedTabs.includes(e))I(F.unpinnedTabs.filter(t=>t!==e));else{let t=[...F.unpinnedTabs,e];if(I(t),R===e&&z){let n=K.find(({tab:n})=>n!==e&&!t.includes(n));n&&(B(n.tab),L(n.tab))}}};if(!e)return null;let Y=!!(k?.current&&j),X=(0,T.jsx)(p.ContextMenu,{ref:A,theme:Y?`popover`:`default`,position:Y?`none`:`bottom`,alignment:Y?`none`:`left`,spacing:Y?`none`:`default`,className:s.cn(`z-[9999] w-fit`,Y?`mt-0`:`mt-2`),children:K.map(({tab:e,icon:t,i18nKey:r})=>{let i=!F.unpinnedTabs.includes(e);return(0,T.jsx)(`li`,{className:`list-none`,children:(0,T.jsx)(_.ArchivedDisabledTooltip,{isDisabled:W,children:(0,T.jsxs)(`div`,{className:s.cn(`group flex h-[30px] w-full min-w-0 items-stretch rounded`,!W&&`hover:bg-[var(--oh-interactive-hover)]`,W&&`opacity-50`),children:[(0,T.jsxs)(`button`,{type:`button`,"data-testid":`conversation-tabs-menu-open-${e}`,disabled:W,className:s.cn(`flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white`,f.dropdownInstantColorClassName,W?`cursor-not-allowed`:`cursor-pointer`),onClick:()=>q(e),children:[(0,T.jsx)(`span`,{className:f.dropdownMenuRowIconWrapperClassName,"aria-hidden":!0,children:(0,T.jsx)(t,{className:`h-4 w-4`})}),(0,T.jsx)(`span`,{className:`text-sm`,children:N(r)})]}),(0,T.jsx)(`button`,{type:`button`,"data-testid":`conversation-tabs-menu-pin-${e}`,disabled:W,className:s.cn(`flex shrink-0 items-center justify-center rounded-r px-2 text-white`,f.dropdownInstantColorClassName,W?`cursor-not-allowed`:`cursor-pointer hover:bg-white/10`),"aria-pressed":i,"aria-label":N(i?n.I18nKey.CONVERSATION$UNPIN_TAB:n.I18nKey.CONVERSATION$PIN_TAB),onClick:t=>J(e,t),children:i?(0,T.jsx)(`span`,{className:s.cn(`-mr-[5px] ml-auto`,f.dropdownMenuRowIconWrapperClassName),"aria-hidden":!0,children:(0,T.jsx)(x.default,{className:`h-7 w-7`})}):(0,T.jsx)(`span`,{className:s.cn(`ml-auto`,f.dropdownMenuRowIconWrapperClassName),"aria-hidden":!0,children:(0,T.jsx)(b.default,{className:`h-4.5 w-4.5`})})})]})})},e)})});return Y&&j&&typeof document<`u`?E.default.createPortal((0,T.jsx)(`div`,{style:j,children:X}),document.body):X}exports.ConversationTabsContextMenu=D;
 //# sourceMappingURL=conversation-tabs-context-menu.cjs.map

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs-context-menu.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-tabs-context-menu.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"commits\",\n icon: LuFileDiff,\n i18nKey: I18nKey.DIFF_VIEWER$COMMITS,\n },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.js CHANGED Viewed

@@ -16,24 +16,25 @@ import { useSelectConversationTab as h } from "../../../../hooks/use-select-conv
 import g from "../../../../icons/document.js";
 import { ArchivedDisabledTooltip as _ } from "../../context-menu/archived-disabled-tooltip.js";
 import { useIsArchivedConversation as v } from "../../../../hooks/use-is-archived-conversation.js";
-import y from "../../../../icons/double-check.js";
+import { LuFileDiff as y } from "../../../../node_modules/react-icons/lu/index.js";
 import b from "../../../../icons/pill.js";
 import x from "../../../../icons/pill-fill.js";
-import { useTaskList as S } from "../../../../hooks/use-task-list.js";
-import { useLayoutEffect as C, useState as w } from "react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import D from "react-dom";
+import S from "../../../../icons/double-check.js";
+import { useTaskList as C } from "../../../../hooks/use-task-list.js";
+import { useLayoutEffect as w, useState as T } from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import O from "react-dom";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx
-function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
-	let M = m(k, A), [N, P] = w();
-	C(() => {
-		if (!O || !j?.current) {
-			P(void 0);
+function k({ isOpen: k, onClose: A, ignoreOutsideClickRef: j, anchorRef: M }) {
+	let N = m(A, j), [P, F] = T();
+	w(() => {
+		if (!k || !M?.current) {
+			F(void 0);
 			return;
 		}
 		let e = () => {
-			let e = j.current?.getBoundingClientRect();
-			e && P({
+			let e = M.current?.getBoundingClientRect();
+			e && F({
 				position: "fixed",
 				zIndex: 9999,
 				top: e.bottom + 8,
@@ -43,8 +44,8 @@ function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
 		return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
-	}, [O, j]);
-	let { t: F } = e("openhands"), { conversationId: I } = s(), { state: L, setUnpinnedTabs: R, setSelectedTab: z } = c(I), { selectedTab: B, isRightPanelShown: V, setSelectedTab: H } = l(), { navigateToTab: U } = h(), { hasTaskList: W } = S(), { backend: G } = u(), K = v(), q = [
+	}, [k, M]);
+	let { t: I } = e("openhands"), { conversationId: L } = s(), { state: R, setUnpinnedTabs: z, setSelectedTab: B } = c(L), { selectedTab: V, isRightPanelShown: H, setSelectedTab: U } = l(), { navigateToTab: W } = h(), { hasTaskList: G } = C(), { backend: K } = u(), q = v(), J = [
 		{
 			tab: "planner",
 			icon: i,
@@ -55,6 +56,11 @@ function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
 			icon: g,
 			i18nKey: t.COMMON$FILES
 		},
+		{
+			tab: "commits",
+			icon: y,
+			i18nKey: t.DIFF_VIEWER$COMMITS
+		},
 		{
 			tab: "terminal",
 			icon: a,
@@ -71,73 +77,73 @@ function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
 			i18nKey: t.COMMON$USAGE
 		}
 	];
-	W && q.unshift({
+	G && J.unshift({
 		tab: "tasklist",
-		icon: y,
+		icon: S,
 		i18nKey: t.COMMON$TASK_LIST
 	});
-	let J = q.filter(({ tab: e }) => e !== "planner" || G.kind === "cloud"), Y = (e) => {
-		K || (U(e), k());
-	}, X = (e, t) => {
-		if (K) {
+	let Y = J.filter(({ tab: e }) => e !== "planner" || K.kind === "cloud"), X = (e) => {
+		q || (W(e), A());
+	}, Z = (e, t) => {
+		if (q) {
 			t.preventDefault(), t.stopPropagation();
 			return;
 		}
-		if (t.preventDefault(), t.stopPropagation(), L.unpinnedTabs.includes(e)) R(L.unpinnedTabs.filter((t) => t !== e));
+		if (t.preventDefault(), t.stopPropagation(), R.unpinnedTabs.includes(e)) z(R.unpinnedTabs.filter((t) => t !== e));
 		else {
-			let t = [...L.unpinnedTabs, e];
-			if (R(t), B === e && V) {
-				let n = J.find(({ tab: n }) => n !== e && !t.includes(n));
-				n && (H(n.tab), z(n.tab));
+			let t = [...R.unpinnedTabs, e];
+			if (z(t), V === e && H) {
+				let n = Y.find(({ tab: n }) => n !== e && !t.includes(n));
+				n && (U(n.tab), B(n.tab));
 			}
 		}
 	};
-	if (!O) return null;
-	let Z = !!(j?.current && N), Q = /* @__PURE__ */ T(p, {
-		ref: M,
-		theme: Z ? "popover" : "default",
-		position: Z ? "none" : "bottom",
-		alignment: Z ? "none" : "left",
-		spacing: Z ? "none" : "default",
-		className: o("z-[9999] w-fit", Z ? "mt-0" : "mt-2"),
-		children: J.map(({ tab: e, icon: n, i18nKey: r }) => {
-			let i = !L.unpinnedTabs.includes(e);
-			return /* @__PURE__ */ T("li", {
+	if (!k) return null;
+	let Q = !!(M?.current && P), $ = /* @__PURE__ */ E(p, {
+		ref: N,
+		theme: Q ? "popover" : "default",
+		position: Q ? "none" : "bottom",
+		alignment: Q ? "none" : "left",
+		spacing: Q ? "none" : "default",
+		className: o("z-[9999] w-fit", Q ? "mt-0" : "mt-2"),
+		children: Y.map(({ tab: e, icon: n, i18nKey: r }) => {
+			let i = !R.unpinnedTabs.includes(e);
+			return /* @__PURE__ */ E("li", {
 				className: "list-none",
-				children: /* @__PURE__ */ T(_, {
-					isDisabled: K,
-					children: /* @__PURE__ */ E("div", {
-						className: o("group flex h-[30px] w-full min-w-0 items-stretch rounded", !K && "hover:bg-[var(--oh-interactive-hover)]", K && "opacity-50"),
-						children: [/* @__PURE__ */ E("button", {
+				children: /* @__PURE__ */ E(_, {
+					isDisabled: q,
+					children: /* @__PURE__ */ D("div", {
+						className: o("group flex h-[30px] w-full min-w-0 items-stretch rounded", !q && "hover:bg-[var(--oh-interactive-hover)]", q && "opacity-50"),
+						children: [/* @__PURE__ */ D("button", {
 							type: "button",
 							"data-testid": `conversation-tabs-menu-open-${e}`,
-							disabled: K,
-							className: o("flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white", d, K ? "cursor-not-allowed" : "cursor-pointer"),
-							onClick: () => Y(e),
-							children: [/* @__PURE__ */ T("span", {
+							disabled: q,
+							className: o("flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white", d, q ? "cursor-not-allowed" : "cursor-pointer"),
+							onClick: () => X(e),
+							children: [/* @__PURE__ */ E("span", {
 								className: f,
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ T(n, { className: "h-4 w-4" })
-							}), /* @__PURE__ */ T("span", {
+								children: /* @__PURE__ */ E(n, { className: "h-4 w-4" })
+							}), /* @__PURE__ */ E("span", {
 								className: "text-sm",
-								children: F(r)
+								children: I(r)
 							})]
-						}), /* @__PURE__ */ T("button", {
+						}), /* @__PURE__ */ E("button", {
 							type: "button",
 							"data-testid": `conversation-tabs-menu-pin-${e}`,
-							disabled: K,
-							className: o("flex shrink-0 items-center justify-center rounded-r px-2 text-white", d, K ? "cursor-not-allowed" : "cursor-pointer hover:bg-white/10"),
+							disabled: q,
+							className: o("flex shrink-0 items-center justify-center rounded-r px-2 text-white", d, q ? "cursor-not-allowed" : "cursor-pointer hover:bg-white/10"),
 							"aria-pressed": i,
-							"aria-label": F(i ? t.CONVERSATION$UNPIN_TAB : t.CONVERSATION$PIN_TAB),
-							onClick: (t) => X(e, t),
-							children: i ? /* @__PURE__ */ T("span", {
+							"aria-label": I(i ? t.CONVERSATION$UNPIN_TAB : t.CONVERSATION$PIN_TAB),
+							onClick: (t) => Z(e, t),
+							children: i ? /* @__PURE__ */ E("span", {
 								className: o("-mr-[5px] ml-auto", f),
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ T(x, { className: "h-7 w-7" })
-							}) : /* @__PURE__ */ T("span", {
+								children: /* @__PURE__ */ E(x, { className: "h-7 w-7" })
+							}) : /* @__PURE__ */ E("span", {
 								className: o("ml-auto", f),
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ T(b, { className: "h-4.5 w-4.5" })
+								children: /* @__PURE__ */ E(b, { className: "h-4.5 w-4.5" })
 							})
 						})]
 					})
@@ -145,12 +151,12 @@ function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
 			}, e);
 		})
 	});
-	return Z && N && typeof document < "u" ? D.createPortal(/* @__PURE__ */ T("div", {
-		style: N,
-		children: Q
-	}), document.body) : Q;
+	return Q && P && typeof document < "u" ? O.createPortal(/* @__PURE__ */ E("div", {
+		style: P,
+		children: $
+	}), document.body) : $;
 }
 //#endregion
-export { O as ConversationTabsContextMenu };
+export { k as ConversationTabsContextMenu };
 //# sourceMappingURL=conversation-tabs-context-menu.js.map

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs-context-menu.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-tabs-context-menu.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"commits\",\n icon: LuFileDiff,\n i18nKey: I18nKey.DIFF_VIEWER$COMMITS,\n },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),ee=require("../../../../hooks/use-select-conversation-tab.cjs"),h=require("../../../../icons/document.cjs"),g=require("../../../../hooks/use-handle-build-plan-click.cjs"),_=require("../../conversation-panel/ellipsis-button.cjs"),v=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),y=require("../../chat/chat-action-tooltip.cjs"),b=require("../../../../icons/double-check.cjs"),x=require("./conversation-tab-nav.cjs"),S=require("./drawer-vscode-link.cjs"),te=require("../../../../hooks/use-task-list.cjs"),ne=require("./conversation-tabs-context-menu.cjs");let C=require("react"),w=require("react/jsx-runtime");function T({variant:T=`default`,isPanelResizing:E=!1}){let{conversationId:D}=c.useConversationId(),{setSelectedTab:O,planContent:k}=u.useConversationStore(),[A,j]=(0,C.useState)(!1),{state:M}=l.useConversationLocalStorageState(D),{hasTaskList:N}=te.useTaskList(),{backend:P}=d.useActiveBackend(),{handleBuildPlanClick:F}=g.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=ee.useSelectConversationTab();(0,C.useEffect)(()=>{O(M.selectedTab)},[O,M.selectedTab]),(0,C.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:h.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`planner`,isActive:R(`planner`),icon:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];N&&W.splice(1,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:b.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`planner`&&P.kind!==`cloud`?!1:M.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=M.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!k,J=(0,C.useRef)(null),Y=(0,C.useRef)(null),X=(0,C.useRef)(null),Z=(0,C.useRef)(null),Q=(0,C.useRef)(null),[re,$]=(0,C.useState)(G.length);(0,C.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),()=>a.disconnect()},[K,G.length,N,P.kind,B,V,U.language]);let ie=Math.min(re,G.length);return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,T===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,w.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,w.jsx)(y.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,w.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,w.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,w.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,w.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,w.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,w.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ie).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,w.jsx)(y.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,w.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:E})},`${e}-${l}`))})}),(0,w.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,w.jsx)(_.EllipsisButton,{ref:Q,onClick:()=>j(!A),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:T===`compact`?v.mobileTopBarIconClassName:void 0}),(0,w.jsx)(ne.ConversationTabsContextMenu,{isOpen:A,onClose:()=>j(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,w.jsx)(`div`,{ref:Z,className:s.cn(`ml-auto shrink-0`,P.kind===`cloud`&&`pr-1`),children:P.kind===`cloud`&&(0,w.jsx)(S.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,w.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,w.jsx)(`button`,{type:`button`,onClick:F,disabled:q,className:s.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,w.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=T;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../../../hooks/use-handle-build-plan-click.cjs"),v=require("../../../../node_modules/react-icons/lu/index.cjs"),y=require("../../conversation-panel/ellipsis-button.cjs"),b=require("../../chat/chat-action-tooltip.cjs"),x=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),S=require("../../../../icons/double-check.cjs"),C=require("./conversation-tab-nav.cjs"),ee=require("./drawer-vscode-link.cjs"),te=require("../../../../hooks/use-task-list.cjs"),w=require("./conversation-tabs-context-menu.cjs");let T=require("react"),E=require("react/jsx-runtime");function D({variant:D=`default`,isPanelResizing:O=!1}){let{conversationId:k}=c.useConversationId(),{setSelectedTab:A,planContent:ne}=u.useConversationStore(),[j,M]=(0,T.useState)(!1),{state:N}=l.useConversationLocalStorageState(k),{hasTaskList:P}=te.useTaskList(),{backend:F}=d.useActiveBackend(),{handleBuildPlanClick:re}=_.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=h.useSelectConversationTab();(0,T.useEffect)(()=>{A(N.selectedTab)},[A,N.selectedTab]),(0,T.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:g.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`commits`,isActive:R(`commits`),icon:v.LuFileDiff,onClick:()=>L(`commits`),tooltipContent:H(t.I18nKey.DIFF_VIEWER$COMMITS),tooltipAriaLabel:H(t.I18nKey.DIFF_VIEWER$COMMITS),label:H(t.I18nKey.DIFF_VIEWER$COMMITS)},{tabValue:`planner`,isActive:R(`planner`),icon:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];P&&W.splice(2,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:S.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`planner`&&F.kind!==`cloud`?!1:N.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=N.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!ne,J=(0,T.useRef)(null),Y=(0,T.useRef)(null),X=(0,T.useRef)(null),Z=(0,T.useRef)(null),Q=(0,T.useRef)(null),[ie,$]=(0,T.useState)(G.length);(0,T.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),()=>a.disconnect()},[K,G.length,P,F.kind,B,V,U.language]);let ae=Math.min(ie,G.length);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,D===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,E.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,E.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,E.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,E.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,E.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,E.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ae).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:O})},`${e}-${l}`))})}),(0,E.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,E.jsx)(y.EllipsisButton,{ref:Q,onClick:()=>M(!j),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:D===`compact`?x.mobileTopBarIconClassName:void 0}),(0,E.jsx)(w.ConversationTabsContextMenu,{isOpen:j,onClose:()=>M(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,E.jsx)(`div`,{ref:Z,className:s.cn(`ml-auto shrink-0`,F.kind===`cloud`&&`pr-1`),children:F.kind===`cloud`&&(0,E.jsx)(ee.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,E.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,E.jsx)(`button`,{type:`button`,onClick:re,disabled:q,className:s.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,E.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=D;
 //# sourceMappingURL=conversation-tabs.cjs.map

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: ListTodo,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: Globe,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n {\n tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\n },\n ];\n\n if (hasTaskList) {\n // Insert after `files` so the leftmost slot stays Files.\n tabs.splice(1, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const vscodeButtonRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const vscodeWidth = vscodeEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth + vscodeWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/ eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"commits\",\n isActive: isTabActive(\"commits\"),\n icon: LuFileDiff,\n onClick: () => selectTab(\"commits\"),\n tooltipContent: t(I18nKey.DIFF_VIEWER$COMMITS),\n tooltipAriaLabel: t(I18nKey.DIFF_VIEWER$COMMITS),\n label: t(I18nKey.DIFF_VIEWER$COMMITS),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: ListTodo,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: Globe,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n {\n tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\n },\n ];\n\n if (hasTaskList) {\n // Insert after the file-related tabs.\n tabs.splice(2, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const vscodeButtonRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const vscodeWidth = vscodeEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth + vscodeWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/ eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}