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

@openhands/agent-canvas 1.11.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 (766) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-name.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { EllipsisButton } from \"../conversation-panel/ellipsis-button\";\nimport { ConversationNameContextMenu } from \"./conversation-name-context-menu\";\nimport { SystemMessageModal } from \"../conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"../conversation-panel/skills-modal\";\nimport { HooksModal } from \"../conversation-panel/hooks-modal\";\nimport { ConfirmDeleteModal } from \"../conversation-panel/confirm-delete-modal\";\nimport { ConfirmStopModal } from \"../conversation-panel/confirm-stop-modal\";\nimport { MetricsModal } from \"./metrics-modal/metrics-modal\";\nimport { TranscriptExportModal } from \"./transcript-export-modal\";\n\nexport function ConversationName() {\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const { data: conversation } = useActiveConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n const [titleMode, setTitleMode] = React.useState<\"view\" \| \"edit\">(\"view\");\n const [contextMenuOpen, setContextMenuOpen] = React.useState(false);\n const [transcriptExportModalVisible, setTranscriptExportModalVisible] =\n React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const ellipsisAnchorRef = React.useRef<HTMLDivElement>(null);\n\n // Use the custom hook for context menu handlers\n const {\n handleDelete,\n handleStop,\n handleDownloadConversation,\n handleDisplayCost,\n handleShowAgentTools,\n handleShowSkills,\n handleShowHooks,\n handleTogglePublic,\n handleCopyShareLink,\n shareUrl,\n handleConfirmDelete,\n handleConfirmStop,\n metricsModalVisible,\n setMetricsModalVisible,\n systemModalVisible,\n setSystemModalVisible,\n skillsModalVisible,\n setSkillsModalVisible,\n hooksModalVisible,\n setHooksModalVisible,\n confirmDeleteModalVisible,\n setConfirmDeleteModalVisible,\n confirmStopModalVisible,\n setConfirmStopModalVisible,\n systemMessage,\n shouldShowStop,\n shouldShowDownloadConversation,\n shouldShowDisplayCost,\n shouldShowAgentTools,\n shouldShowSkills,\n shouldShowHooks,\n } = useConversationNameContextMenu({\n conversationId,\n executionStatus: conversation?.execution_status,\n showOptions: true,\n onContextMenuToggle: setContextMenuOpen,\n });\n\n const handleDoubleClick = () => {\n setTitleMode(\"edit\");\n };\n\n const handleBlur = () => {\n if (inputRef.current?.value && conversationId) {\n const trimmed = inputRef.current.value.trim();\n if (trimmed !== conversation?.title) {\n updateConversation(\n { conversationId, newTitle: trimmed },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n }\n } else if (inputRef.current) {\n // reset the value if it's empty\n inputRef.current.value = conversation?.title ?? \"\";\n }\n\n setTitleMode(\"view\");\n };\n\n const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n // Ignore Enter key during IME composition (e.g., Chinese, Japanese, Korean input)\n if (event.nativeEvent.isComposing) {\n return;\n }\n if (event.key === \"Enter\") {\n event.currentTarget.blur();\n }\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n if (titleMode === \"edit\") {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const handleEllipsisClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleRename = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setTitleMode(\"edit\");\n setContextMenuOpen(false);\n };\n\n const handleExportTranscript = (\n event: React.MouseEvent<HTMLButtonElement>,\n ) => {\n event.preventDefault();\n event.stopPropagation();\n setTranscriptExportModalVisible(true);\n setContextMenuOpen(false);\n };\n\n React.useEffect(() => {\n if (titleMode === \"edit\") {\n inputRef.current?.focus();\n }\n }, [titleMode]);\n\n if (!conversation) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0\"\n data-testid=\"conversation-name\"\n >\n {titleMode === \"edit\" ? (\n <input\n ref={inputRef}\n data-testid=\"conversation-name-input\"\n onClick={handleInputClick}\n onBlur={handleBlur}\n onKeyUp={handleKeyUp}\n type=\"text\"\n defaultValue={conversation.title \|\| \"\"}\n className=\"text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content\"\n />\n ) : (\n <div\n className=\"text-white leading-5 truncate\"\n data-testid=\"conversation-name-title\"\n onDoubleClick={handleDoubleClick}\n title={conversation.title \|\| \"\"}\n >\n {conversation.title}\n </div>\n )}\n\n {titleMode !== \"edit\" && (\n <div\n ref={ellipsisAnchorRef}\n className=\"relative flex items-center shrink-0\"\n >\n <EllipsisButton onClick={handleEllipsisClick} />\n {contextMenuOpen && (\n <ConversationNameContextMenu\n onClose={() => setContextMenuOpen(false)}\n onRename={handleRename}\n onDelete={handleDelete}\n onStop={shouldShowStop ? handleStop : undefined}\n onDisplayCost={\n shouldShowDisplayCost ? handleDisplayCost : undefined\n }\n onShowAgentTools={\n shouldShowAgentTools ? handleShowAgentTools : undefined\n }\n onShowSkills={shouldShowSkills ? handleShowSkills : undefined}\n onShowHooks={shouldShowHooks ? handleShowHooks : undefined}\n onTogglePublic={handleTogglePublic}\n onCopyShareLink={handleCopyShareLink}\n shareUrl={shareUrl}\n onExportTranscript={handleExportTranscript}\n onDownloadConversation={\n shouldShowDownloadConversation\n ? handleDownloadConversation\n : undefined\n }\n position=\"bottom\"\n anchorRef={ellipsisAnchorRef}\n />\n )}\n </div>\n )}\n </div>\n\n {/* Metrics Modal /}\n <MetricsModal\n isOpen={metricsModalVisible}\n onOpenChange={setMetricsModalVisible}\n />\n\n {transcriptExportModalVisible && conversationId && (\n <TranscriptExportModal\n conversationId={conversationId}\n conversationUrl={conversation.conversation_url}\n sessionApiKey={conversation.session_api_key}\n conversationTitle={conversation.title}\n model={conversation.llm_model}\n onClose={() => setTranscriptExportModalVisible(false)}\n />\n )}\n\n {/ System Message Modal /}\n <SystemMessageModal\n isOpen={systemModalVisible}\n onClose={() => setSystemModalVisible(false)}\n systemMessage={systemMessage \|\| null}\n />\n\n {/ Skills Modal /}\n {skillsModalVisible && (\n <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n )}\n\n {/ Hooks Modal /}\n {hooksModalVisible && (\n <HooksModal onClose={() => setHooksModalVisible(false)} />\n )}\n\n {/ Confirm Delete Modal */}\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={handleConfirmDelete}\n onCancel={() => setConfirmDeleteModalVisible(false)}\n conversationTitle={conversation?.title \|\| \"\"}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={handleConfirmStop}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n </>\n );\n}\n"],"mappings":"qgCAkBA,SAAgB,GAAmB,CACjC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,OAAQ,GAAuB,EAAA,sBAAsB,EAEvD,CAAC,EAAW,GAAgB,EAAA,QAAM,SAA0B,MAAM,EAClE,CAAC,EAAiB,GAAsB,EAAA,QAAM,SAAS,EAAK,EAC5D,CAAC,EAA8B,GACnC,EAAA,QAAM,SAAS,EAAK,EAChB,EAAW,EAAA,QAAM,OAAyB,IAAI,EAC9C,EAAoB,EAAA,QAAM,OAAuB,IAAI,EAGrD,CACJ,eACA,aACA,6BACA,oBACA,wBACA,mBACA,kBACA,qBACA,sBACA,WACA,sBACA,oBACA,sBACA,yBACA,qBACA,wBACA,qBACA,wBACA,oBACA,uBACA,4BACA,+BACA,0BACA,6BACA,gBACA,kBACA,kCACA,yBACA,wBACA,oBACA,oBACE,EAAA,+BAA+B,CACjC,iBACA,gBAAiB,GAAc,iBAC/B,YAAa,GACb,oBAAqB,CACvB,CAAC,EA4ED,OAVA,EAAA,QAAM,cAAgB,CAChB,IAAc,QAChB,EAAS,SAAS,MAAM,CAE5B,EAAG,CAAC,CAAS,CAAC,EAET,GAKH,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,wFACV,cAAY,6BAFd,CAIG,IAAc,QACb,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,cAAY,0BACZ,QAjDgB,GAA8C,CAClE,IAAc,SAChB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAE1B,EA6CU,WAjFe,CACvB,GAAI,EAAS,SAAS,OAAS,EAAgB,CAC7C,IAAM,EAAU,EAAS,QAAQ,MAAM,KAAK,EACxC,IAAY,GAAc,OAC5B,EACE,CAAE,iBAAgB,SAAU,CAAQ,EACpC,CACE,cAAiB,CACf,EAAA,oBAAoB,EAAE,EAAA,QAAQ,0BAA0B,CAAC,CAC3D,CACF,CACF,CAEJ,MAAW,EAAS,UAElB,EAAS,QAAQ,MAAQ,GAAc,OAAS,IAGlD,EAAa,MAAM,CACrB,EA+DU,QA7DW,GAAiD,CAEhE,EAAM,YAAY,aAGlB,EAAM,MAAQ,SAChB,EAAM,cAAc,KAAK,CAE7B,EAsDU,KAAK,OACL,aAAc,EAAa,OAAS,GACpC,UAAU,yHACX,CAAA,GAED,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gCACV,cAAY,0BACZ,kBA/FsB,CAC9B,EAAa,MAAM,CACrB,EA8FU,MAAO,EAAa,OAAS,YAE5B,EAAa,KACX,CAAA,EAGN,IAAc,SACb,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,+CAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,QAjEG,GAA+C,CAC1E,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAmB,CAAC,CAAe,CACrC,CA6DyD,CAAA,EAC9C,IACC,EAAA,EAAA,KAAC,EAAA,4BAAD,CACE,YAAe,EAAmB,EAAK,EACvC,SA/DQ,GAA+C,CACnE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAa,MAAM,EACnB,EAAmB,EAAK,CAC1B,EA2Dc,SAAU,EACV,OAAQ,GAAiB,EAAa,IAAA,GACtC,cACE,GAAwB,EAAoB,IAAA,GAE9C,iBACE,GAAuB,GAAuB,IAAA,GAEhD,aAAc,GAAmB,EAAmB,IAAA,GACpD,YAAa,GAAkB,EAAkB,IAAA,GACjD,eAAgB,EAChB,gBAAiB,EACP,WACV,mBArEZ,GACG,CACH,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAgC,EAAI,EACpC,EAAmB,EAAK,CAC1B,EAgEc,uBACE,GACI,EACA,IAAA,GAEN,SAAS,SACT,UAAW,CACZ,CAAA,CAEA,GAEJ,KAGL,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,OAAQ,EACR,aAAc,CACf,CAAA,EAEA,GAAgC,IAC/B,EAAA,EAAA,KAAC,EAAA,sBAAD,CACkB,iBAChB,gBAAiB,EAAa,iBAC9B,cAAe,EAAa,gBAC5B,kBAAmB,EAAa,MAChC,MAAO,EAAa,UACpB,YAAe,EAAgC,EAAK,CACrD,CAAA,GAIH,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,OAAQ,EACR,YAAe,EAAsB,EAAK,EAC1C,cAAe,GAAiB,IACjC,CAAA,EAGA,IACC,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,YAAe,EAAsB,EAAK,CAAI,CAAA,EAI5D,IACC,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,YAAe,EAAqB,EAAK,CAAI,CAAA,EAI1D,IACC,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,UAAW,EACX,aAAgB,EAA6B,EAAK,EAClD,kBAAmB,GAAc,OAAS,EAC3C,CAAA,EAGF,IACC,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,UAAW,EACX,aAAgB,EAA2B,EAAK,CACjD,CAAA,CAEH,CAAA,CAAA,EArHK,IAuHX"}
1	+ {"version":3,"file":"conversation-name.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { EllipsisButton } from \"../conversation-panel/ellipsis-button\";\nimport { ConversationNameContextMenu } from \"./conversation-name-context-menu\";\nimport { SystemMessageModal } from \"../conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"../conversation-panel/skills-modal\";\nimport { HooksModal } from \"../conversation-panel/hooks-modal\";\nimport { ConfirmDeleteModal } from \"../conversation-panel/confirm-delete-modal\";\nimport { ConfirmStopModal } from \"../conversation-panel/confirm-stop-modal\";\nimport { TranscriptExportModal } from \"./transcript-export-modal\";\n\nexport function ConversationName() {\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const { data: conversation } = useActiveConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n const [titleMode, setTitleMode] = React.useState<\"view\" \| \"edit\">(\"view\");\n const [contextMenuOpen, setContextMenuOpen] = React.useState(false);\n const [transcriptExportModalVisible, setTranscriptExportModalVisible] =\n React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const ellipsisAnchorRef = React.useRef<HTMLDivElement>(null);\n\n // Use the custom hook for context menu handlers\n const {\n handleDelete,\n handleStop,\n handleDownloadConversation,\n handleDisplayCost,\n handleShowAgentTools,\n handleShowSkills,\n handleShowHooks,\n handleTogglePublic,\n handleCopyShareLink,\n shareUrl,\n handleConfirmDelete,\n handleConfirmStop,\n systemModalVisible,\n setSystemModalVisible,\n skillsModalVisible,\n setSkillsModalVisible,\n hooksModalVisible,\n setHooksModalVisible,\n confirmDeleteModalVisible,\n setConfirmDeleteModalVisible,\n confirmStopModalVisible,\n setConfirmStopModalVisible,\n systemMessage,\n shouldShowStop,\n shouldShowDownloadConversation,\n shouldShowDisplayCost,\n shouldShowAgentTools,\n shouldShowSkills,\n shouldShowHooks,\n } = useConversationNameContextMenu({\n conversationId,\n executionStatus: conversation?.execution_status,\n showOptions: true,\n onContextMenuToggle: setContextMenuOpen,\n });\n\n const handleDoubleClick = () => {\n setTitleMode(\"edit\");\n };\n\n const handleBlur = () => {\n if (inputRef.current?.value && conversationId) {\n const trimmed = inputRef.current.value.trim();\n if (trimmed !== conversation?.title) {\n updateConversation(\n { conversationId, newTitle: trimmed },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n }\n } else if (inputRef.current) {\n // reset the value if it's empty\n inputRef.current.value = conversation?.title ?? \"\";\n }\n\n setTitleMode(\"view\");\n };\n\n const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n // Ignore Enter key during IME composition (e.g., Chinese, Japanese, Korean input)\n if (event.nativeEvent.isComposing) {\n return;\n }\n if (event.key === \"Enter\") {\n event.currentTarget.blur();\n }\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n if (titleMode === \"edit\") {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const handleEllipsisClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleRename = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setTitleMode(\"edit\");\n setContextMenuOpen(false);\n };\n\n const handleExportTranscript = (\n event: React.MouseEvent<HTMLButtonElement>,\n ) => {\n event.preventDefault();\n event.stopPropagation();\n setTranscriptExportModalVisible(true);\n setContextMenuOpen(false);\n };\n\n React.useEffect(() => {\n if (titleMode === \"edit\") {\n inputRef.current?.focus();\n }\n }, [titleMode]);\n\n if (!conversation) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0\"\n data-testid=\"conversation-name\"\n >\n {titleMode === \"edit\" ? (\n <input\n ref={inputRef}\n data-testid=\"conversation-name-input\"\n onClick={handleInputClick}\n onBlur={handleBlur}\n onKeyUp={handleKeyUp}\n type=\"text\"\n defaultValue={conversation.title \|\| \"\"}\n className=\"text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content\"\n />\n ) : (\n <div\n className=\"text-white leading-5 truncate\"\n data-testid=\"conversation-name-title\"\n onDoubleClick={handleDoubleClick}\n title={conversation.title \|\| \"\"}\n >\n {conversation.title}\n </div>\n )}\n\n {titleMode !== \"edit\" && (\n <div\n ref={ellipsisAnchorRef}\n className=\"relative flex items-center shrink-0\"\n >\n <EllipsisButton\n onClick={handleEllipsisClick}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n />\n {contextMenuOpen && (\n <ConversationNameContextMenu\n onClose={() => setContextMenuOpen(false)}\n onRename={handleRename}\n onDelete={handleDelete}\n onStop={shouldShowStop ? handleStop : undefined}\n onDisplayCost={\n shouldShowDisplayCost ? handleDisplayCost : undefined\n }\n onShowAgentTools={\n shouldShowAgentTools ? handleShowAgentTools : undefined\n }\n onShowSkills={shouldShowSkills ? handleShowSkills : undefined}\n onShowHooks={shouldShowHooks ? handleShowHooks : undefined}\n onTogglePublic={handleTogglePublic}\n onCopyShareLink={handleCopyShareLink}\n shareUrl={shareUrl}\n onExportTranscript={handleExportTranscript}\n onDownloadConversation={\n shouldShowDownloadConversation\n ? handleDownloadConversation\n : undefined\n }\n position=\"bottom\"\n anchorRef={ellipsisAnchorRef}\n />\n )}\n </div>\n )}\n </div>\n\n {transcriptExportModalVisible && conversationId && (\n <TranscriptExportModal\n conversationId={conversationId}\n conversationUrl={conversation.conversation_url}\n sessionApiKey={conversation.session_api_key}\n conversationTitle={conversation.title}\n model={conversation.llm_model}\n onClose={() => setTranscriptExportModalVisible(false)}\n />\n )}\n\n {/* System Message Modal /}\n <SystemMessageModal\n isOpen={systemModalVisible}\n onClose={() => setSystemModalVisible(false)}\n systemMessage={systemMessage \|\| null}\n />\n\n {/ Skills Modal /}\n {skillsModalVisible && (\n <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n )}\n\n {/ Hooks Modal /}\n {hooksModalVisible && (\n <HooksModal onClose={() => setHooksModalVisible(false)} />\n )}\n\n {/ Confirm Delete Modal */}\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={handleConfirmDelete}\n onCancel={() => setConfirmDeleteModalVisible(false)}\n conversationTitle={conversation?.title \|\| \"\"}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={handleConfirmStop}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-name.js CHANGED Viewed

@@ -12,115 +12,113 @@ import { EllipsisButton as u } from "../conversation-panel/ellipsis-button.js";
 import { ConversationNameContextMenu as d } from "./conversation-name-context-menu.js";
 import { ConfirmDeleteModal as f } from "../conversation-panel/confirm-delete-modal.js";
 import { ConfirmStopModal as p } from "../conversation-panel/confirm-stop-modal.js";
-import { MetricsModal as m } from "./metrics-modal/metrics-modal.js";
-import { TranscriptExportModal as h } from "./transcript-export-modal.js";
-import g from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { TranscriptExportModal as m } from "./transcript-export-modal.js";
+import h from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-name.tsx
-function b() {
-	let { t: b } = e("openhands"), { conversationId: x } = n(), { data: S } = i(), { mutate: C } = l(), [w, T] = g.useState("view"), [E, D] = g.useState(!1), [O, k] = g.useState(!1), A = g.useRef(null), j = g.useRef(null), { handleDelete: M, handleStop: N, handleDownloadConversation: P, handleDisplayCost: F, handleShowAgentTools: I, handleShowSkills: L, handleShowHooks: R, handleTogglePublic: ee, handleCopyShareLink: z, shareUrl: B, handleConfirmDelete: V, handleConfirmStop: H, metricsModalVisible: U, setMetricsModalVisible: W, systemModalVisible: G, setSystemModalVisible: K, skillsModalVisible: q, setSkillsModalVisible: J, hooksModalVisible: Y, setHooksModalVisible: X, confirmDeleteModalVisible: Z, setConfirmDeleteModalVisible: Q, confirmStopModalVisible: $, setConfirmStopModalVisible: te, systemMessage: ne, shouldShowStop: re, shouldShowDownloadConversation: ie, shouldShowDisplayCost: ae, shouldShowAgentTools: oe, shouldShowSkills: se, shouldShowHooks: ce } = a({
-		conversationId: x,
-		executionStatus: S?.execution_status,
+function y() {
+	let { t: y } = e("openhands"), { conversationId: b } = n(), { data: x } = i(), { mutate: S } = l(), [C, w] = h.useState("view"), [T, E] = h.useState(!1), [D, O] = h.useState(!1), k = h.useRef(null), A = h.useRef(null), { handleDelete: j, handleStop: M, handleDownloadConversation: N, handleDisplayCost: P, handleShowAgentTools: F, handleShowSkills: ee, handleShowHooks: I, handleTogglePublic: L, handleCopyShareLink: R, shareUrl: z, handleConfirmDelete: B, handleConfirmStop: V, systemModalVisible: H, setSystemModalVisible: U, skillsModalVisible: W, setSkillsModalVisible: G, hooksModalVisible: K, setHooksModalVisible: q, confirmDeleteModalVisible: J, setConfirmDeleteModalVisible: Y, confirmStopModalVisible: X, setConfirmStopModalVisible: Z, systemMessage: Q, shouldShowStop: $, shouldShowDownloadConversation: te, shouldShowDisplayCost: ne, shouldShowAgentTools: re, shouldShowSkills: ie, shouldShowHooks: ae } = a({
+		conversationId: b,
+		executionStatus: x?.execution_status,
 		showOptions: !0,
-		onContextMenuToggle: D
+		onContextMenuToggle: E
 	});
-	return g.useEffect(() => {
-		w === "edit" && A.current?.focus();
-	}, [w]), S ? /* @__PURE__ */ y(_, { children: [
-		/* @__PURE__ */ y("div", {
+	return h.useEffect(() => {
+		C === "edit" && k.current?.focus();
+	}, [C]), x ? /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ v("div", {
 			className: "flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0",
 			"data-testid": "conversation-name",
-			children: [w === "edit" ? /* @__PURE__ */ v("input", {
-				ref: A,
+			children: [C === "edit" ? /* @__PURE__ */ _("input", {
+				ref: k,
 				"data-testid": "conversation-name-input",
 				onClick: (e) => {
-					w === "edit" && (e.preventDefault(), e.stopPropagation());
+					C === "edit" && (e.preventDefault(), e.stopPropagation());
 				},
 				onBlur: () => {
-					if (A.current?.value && x) {
-						let e = A.current.value.trim();
-						e !== S?.title && C({
-							conversationId: x,
+					if (k.current?.value && b) {
+						let e = k.current.value.trim();
+						e !== x?.title && S({
+							conversationId: b,
 							newTitle: e
 						}, { onSuccess: () => {
-							r(b(t.CONVERSATION$TITLE_UPDATED));
+							r(y(t.CONVERSATION$TITLE_UPDATED));
 						} });
-					} else A.current && (A.current.value = S?.title ?? "");
-					T("view");
+					} else k.current && (k.current.value = x?.title ?? "");
+					w("view");
 				},
 				onKeyUp: (e) => {
 					e.nativeEvent.isComposing || e.key === "Enter" && e.currentTarget.blur();
 				},
 				type: "text",
-				defaultValue: S.title || "",
+				defaultValue: x.title || "",
 				className: "text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content"
-			}) : /* @__PURE__ */ v("div", {
+			}) : /* @__PURE__ */ _("div", {
 				className: "text-white leading-5 truncate",
 				"data-testid": "conversation-name-title",
 				onDoubleClick: () => {
-					T("edit");
+					w("edit");
 				},
-				title: S.title || "",
-				children: S.title
-			}), w !== "edit" && /* @__PURE__ */ y("div", {
-				ref: j,
+				title: x.title || "",
+				children: x.title
+			}), C !== "edit" && /* @__PURE__ */ v("div", {
+				ref: A,
 				className: "relative flex items-center shrink-0",
-				children: [/* @__PURE__ */ v(u, { onClick: (e) => {
-					e.preventDefault(), e.stopPropagation(), D(!E);
-				} }), E && /* @__PURE__ */ v(d, {
-					onClose: () => D(!1),
+				children: [/* @__PURE__ */ _(u, {
+					onClick: (e) => {
+						e.preventDefault(), e.stopPropagation(), E(!T);
+					},
+					ariaLabel: y(t.COMMON$MORE_OPTIONS)
+				}), T && /* @__PURE__ */ _(d, {
+					onClose: () => E(!1),
 					onRename: (e) => {
-						e.preventDefault(), e.stopPropagation(), T("edit"), D(!1);
+						e.preventDefault(), e.stopPropagation(), w("edit"), E(!1);
 					},
-					onDelete: M,
-					onStop: re ? N : void 0,
-					onDisplayCost: ae ? F : void 0,
-					onShowAgentTools: oe ? I : void 0,
-					onShowSkills: se ? L : void 0,
-					onShowHooks: ce ? R : void 0,
-					onTogglePublic: ee,
-					onCopyShareLink: z,
-					shareUrl: B,
+					onDelete: j,
+					onStop: $ ? M : void 0,
+					onDisplayCost: ne ? P : void 0,
+					onShowAgentTools: re ? F : void 0,
+					onShowSkills: ie ? ee : void 0,
+					onShowHooks: ae ? I : void 0,
+					onTogglePublic: L,
+					onCopyShareLink: R,
+					shareUrl: z,
 					onExportTranscript: (e) => {
-						e.preventDefault(), e.stopPropagation(), k(!0), D(!1);
+						e.preventDefault(), e.stopPropagation(), O(!0), E(!1);
 					},
-					onDownloadConversation: ie ? P : void 0,
+					onDownloadConversation: te ? N : void 0,
 					position: "bottom",
-					anchorRef: j
+					anchorRef: A
 				})]
 			})]
 		}),
-		/* @__PURE__ */ v(m, {
-			isOpen: U,
-			onOpenChange: W
+		D && b && /* @__PURE__ */ _(m, {
+			conversationId: b,
+			conversationUrl: x.conversation_url,
+			sessionApiKey: x.session_api_key,
+			conversationTitle: x.title,
+			model: x.llm_model,
+			onClose: () => O(!1)
 		}),
-		O && x && /* @__PURE__ */ v(h, {
-			conversationId: x,
-			conversationUrl: S.conversation_url,
-			sessionApiKey: S.session_api_key,
-			conversationTitle: S.title,
-			model: S.llm_model,
-			onClose: () => k(!1)
+		/* @__PURE__ */ _(o, {
+			isOpen: H,
+			onClose: () => U(!1),
+			systemMessage: Q || null
 		}),
-		/* @__PURE__ */ v(o, {
-			isOpen: G,
-			onClose: () => K(!1),
-			systemMessage: ne || null
+		W && /* @__PURE__ */ _(s, { onClose: () => G(!1) }),
+		K && /* @__PURE__ */ _(c, { onClose: () => q(!1) }),
+		J && /* @__PURE__ */ _(f, {
+			onConfirm: B,
+			onCancel: () => Y(!1),
+			conversationTitle: x?.title || ""
 		}),
-		q && /* @__PURE__ */ v(s, { onClose: () => J(!1) }),
-		Y && /* @__PURE__ */ v(c, { onClose: () => X(!1) }),
-		Z && /* @__PURE__ */ v(f, {
+		X && /* @__PURE__ */ _(p, {
 			onConfirm: V,
-			onCancel: () => Q(!1),
-			conversationTitle: S?.title || ""
-		}),
-		$ && /* @__PURE__ */ v(p, {
-			onConfirm: H,
-			onCancel: () => te(!1)
+			onCancel: () => Z(!1)
 		})
 	] }) : null;
 }
 //#endregion
-export { b as ConversationName };
+export { y as ConversationName };
 //# sourceMappingURL=conversation-name.js.map

package/dist/components/features/conversation/conversation-name.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-name.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { EllipsisButton } from \"../conversation-panel/ellipsis-button\";\nimport { ConversationNameContextMenu } from \"./conversation-name-context-menu\";\nimport { SystemMessageModal } from \"../conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"../conversation-panel/skills-modal\";\nimport { HooksModal } from \"../conversation-panel/hooks-modal\";\nimport { ConfirmDeleteModal } from \"../conversation-panel/confirm-delete-modal\";\nimport { ConfirmStopModal } from \"../conversation-panel/confirm-stop-modal\";\nimport { MetricsModal } from \"./metrics-modal/metrics-modal\";\nimport { TranscriptExportModal } from \"./transcript-export-modal\";\n\nexport function ConversationName() {\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const { data: conversation } = useActiveConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n const [titleMode, setTitleMode] = React.useState<\"view\" \| \"edit\">(\"view\");\n const [contextMenuOpen, setContextMenuOpen] = React.useState(false);\n const [transcriptExportModalVisible, setTranscriptExportModalVisible] =\n React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const ellipsisAnchorRef = React.useRef<HTMLDivElement>(null);\n\n // Use the custom hook for context menu handlers\n const {\n handleDelete,\n handleStop,\n handleDownloadConversation,\n handleDisplayCost,\n handleShowAgentTools,\n handleShowSkills,\n handleShowHooks,\n handleTogglePublic,\n handleCopyShareLink,\n shareUrl,\n handleConfirmDelete,\n handleConfirmStop,\n metricsModalVisible,\n setMetricsModalVisible,\n systemModalVisible,\n setSystemModalVisible,\n skillsModalVisible,\n setSkillsModalVisible,\n hooksModalVisible,\n setHooksModalVisible,\n confirmDeleteModalVisible,\n setConfirmDeleteModalVisible,\n confirmStopModalVisible,\n setConfirmStopModalVisible,\n systemMessage,\n shouldShowStop,\n shouldShowDownloadConversation,\n shouldShowDisplayCost,\n shouldShowAgentTools,\n shouldShowSkills,\n shouldShowHooks,\n } = useConversationNameContextMenu({\n conversationId,\n executionStatus: conversation?.execution_status,\n showOptions: true,\n onContextMenuToggle: setContextMenuOpen,\n });\n\n const handleDoubleClick = () => {\n setTitleMode(\"edit\");\n };\n\n const handleBlur = () => {\n if (inputRef.current?.value && conversationId) {\n const trimmed = inputRef.current.value.trim();\n if (trimmed !== conversation?.title) {\n updateConversation(\n { conversationId, newTitle: trimmed },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n }\n } else if (inputRef.current) {\n // reset the value if it's empty\n inputRef.current.value = conversation?.title ?? \"\";\n }\n\n setTitleMode(\"view\");\n };\n\n const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n // Ignore Enter key during IME composition (e.g., Chinese, Japanese, Korean input)\n if (event.nativeEvent.isComposing) {\n return;\n }\n if (event.key === \"Enter\") {\n event.currentTarget.blur();\n }\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n if (titleMode === \"edit\") {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const handleEllipsisClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleRename = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setTitleMode(\"edit\");\n setContextMenuOpen(false);\n };\n\n const handleExportTranscript = (\n event: React.MouseEvent<HTMLButtonElement>,\n ) => {\n event.preventDefault();\n event.stopPropagation();\n setTranscriptExportModalVisible(true);\n setContextMenuOpen(false);\n };\n\n React.useEffect(() => {\n if (titleMode === \"edit\") {\n inputRef.current?.focus();\n }\n }, [titleMode]);\n\n if (!conversation) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0\"\n data-testid=\"conversation-name\"\n >\n {titleMode === \"edit\" ? (\n <input\n ref={inputRef}\n data-testid=\"conversation-name-input\"\n onClick={handleInputClick}\n onBlur={handleBlur}\n onKeyUp={handleKeyUp}\n type=\"text\"\n defaultValue={conversation.title \|\| \"\"}\n className=\"text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content\"\n />\n ) : (\n <div\n className=\"text-white leading-5 truncate\"\n data-testid=\"conversation-name-title\"\n onDoubleClick={handleDoubleClick}\n title={conversation.title \|\| \"\"}\n >\n {conversation.title}\n </div>\n )}\n\n {titleMode !== \"edit\" && (\n <div\n ref={ellipsisAnchorRef}\n className=\"relative flex items-center shrink-0\"\n >\n <EllipsisButton onClick={handleEllipsisClick} />\n {contextMenuOpen && (\n <ConversationNameContextMenu\n onClose={() => setContextMenuOpen(false)}\n onRename={handleRename}\n onDelete={handleDelete}\n onStop={shouldShowStop ? handleStop : undefined}\n onDisplayCost={\n shouldShowDisplayCost ? handleDisplayCost : undefined\n }\n onShowAgentTools={\n shouldShowAgentTools ? handleShowAgentTools : undefined\n }\n onShowSkills={shouldShowSkills ? handleShowSkills : undefined}\n onShowHooks={shouldShowHooks ? handleShowHooks : undefined}\n onTogglePublic={handleTogglePublic}\n onCopyShareLink={handleCopyShareLink}\n shareUrl={shareUrl}\n onExportTranscript={handleExportTranscript}\n onDownloadConversation={\n shouldShowDownloadConversation\n ? handleDownloadConversation\n : undefined\n }\n position=\"bottom\"\n anchorRef={ellipsisAnchorRef}\n />\n )}\n </div>\n )}\n </div>\n\n {/* Metrics Modal /}\n <MetricsModal\n isOpen={metricsModalVisible}\n onOpenChange={setMetricsModalVisible}\n />\n\n {transcriptExportModalVisible && conversationId && (\n <TranscriptExportModal\n conversationId={conversationId}\n conversationUrl={conversation.conversation_url}\n sessionApiKey={conversation.session_api_key}\n conversationTitle={conversation.title}\n model={conversation.llm_model}\n onClose={() => setTranscriptExportModalVisible(false)}\n />\n )}\n\n {/ System Message Modal /}\n <SystemMessageModal\n isOpen={systemModalVisible}\n onClose={() => setSystemModalVisible(false)}\n systemMessage={systemMessage \|\| null}\n />\n\n {/ Skills Modal /}\n {skillsModalVisible && (\n <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n )}\n\n {/ Hooks Modal /}\n {hooksModalVisible && (\n <HooksModal onClose={() => setHooksModalVisible(false)} />\n )}\n\n {/ Confirm Delete Modal */}\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={handleConfirmDelete}\n onCancel={() => setConfirmDeleteModalVisible(false)}\n conversationTitle={conversation?.title \|\| \"\"}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={handleConfirmStop}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-name.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { displaySuccessToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { EllipsisButton } from \"../conversation-panel/ellipsis-button\";\nimport { ConversationNameContextMenu } from \"./conversation-name-context-menu\";\nimport { SystemMessageModal } from \"../conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"../conversation-panel/skills-modal\";\nimport { HooksModal } from \"../conversation-panel/hooks-modal\";\nimport { ConfirmDeleteModal } from \"../conversation-panel/confirm-delete-modal\";\nimport { ConfirmStopModal } from \"../conversation-panel/confirm-stop-modal\";\nimport { TranscriptExportModal } from \"./transcript-export-modal\";\n\nexport function ConversationName() {\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const { data: conversation } = useActiveConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n const [titleMode, setTitleMode] = React.useState<\"view\" \| \"edit\">(\"view\");\n const [contextMenuOpen, setContextMenuOpen] = React.useState(false);\n const [transcriptExportModalVisible, setTranscriptExportModalVisible] =\n React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const ellipsisAnchorRef = React.useRef<HTMLDivElement>(null);\n\n // Use the custom hook for context menu handlers\n const {\n handleDelete,\n handleStop,\n handleDownloadConversation,\n handleDisplayCost,\n handleShowAgentTools,\n handleShowSkills,\n handleShowHooks,\n handleTogglePublic,\n handleCopyShareLink,\n shareUrl,\n handleConfirmDelete,\n handleConfirmStop,\n systemModalVisible,\n setSystemModalVisible,\n skillsModalVisible,\n setSkillsModalVisible,\n hooksModalVisible,\n setHooksModalVisible,\n confirmDeleteModalVisible,\n setConfirmDeleteModalVisible,\n confirmStopModalVisible,\n setConfirmStopModalVisible,\n systemMessage,\n shouldShowStop,\n shouldShowDownloadConversation,\n shouldShowDisplayCost,\n shouldShowAgentTools,\n shouldShowSkills,\n shouldShowHooks,\n } = useConversationNameContextMenu({\n conversationId,\n executionStatus: conversation?.execution_status,\n showOptions: true,\n onContextMenuToggle: setContextMenuOpen,\n });\n\n const handleDoubleClick = () => {\n setTitleMode(\"edit\");\n };\n\n const handleBlur = () => {\n if (inputRef.current?.value && conversationId) {\n const trimmed = inputRef.current.value.trim();\n if (trimmed !== conversation?.title) {\n updateConversation(\n { conversationId, newTitle: trimmed },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n }\n } else if (inputRef.current) {\n // reset the value if it's empty\n inputRef.current.value = conversation?.title ?? \"\";\n }\n\n setTitleMode(\"view\");\n };\n\n const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n // Ignore Enter key during IME composition (e.g., Chinese, Japanese, Korean input)\n if (event.nativeEvent.isComposing) {\n return;\n }\n if (event.key === \"Enter\") {\n event.currentTarget.blur();\n }\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n if (titleMode === \"edit\") {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const handleEllipsisClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleRename = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setTitleMode(\"edit\");\n setContextMenuOpen(false);\n };\n\n const handleExportTranscript = (\n event: React.MouseEvent<HTMLButtonElement>,\n ) => {\n event.preventDefault();\n event.stopPropagation();\n setTranscriptExportModalVisible(true);\n setContextMenuOpen(false);\n };\n\n React.useEffect(() => {\n if (titleMode === \"edit\") {\n inputRef.current?.focus();\n }\n }, [titleMode]);\n\n if (!conversation) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0\"\n data-testid=\"conversation-name\"\n >\n {titleMode === \"edit\" ? (\n <input\n ref={inputRef}\n data-testid=\"conversation-name-input\"\n onClick={handleInputClick}\n onBlur={handleBlur}\n onKeyUp={handleKeyUp}\n type=\"text\"\n defaultValue={conversation.title \|\| \"\"}\n className=\"text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content\"\n />\n ) : (\n <div\n className=\"text-white leading-5 truncate\"\n data-testid=\"conversation-name-title\"\n onDoubleClick={handleDoubleClick}\n title={conversation.title \|\| \"\"}\n >\n {conversation.title}\n </div>\n )}\n\n {titleMode !== \"edit\" && (\n <div\n ref={ellipsisAnchorRef}\n className=\"relative flex items-center shrink-0\"\n >\n <EllipsisButton\n onClick={handleEllipsisClick}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n />\n {contextMenuOpen && (\n <ConversationNameContextMenu\n onClose={() => setContextMenuOpen(false)}\n onRename={handleRename}\n onDelete={handleDelete}\n onStop={shouldShowStop ? handleStop : undefined}\n onDisplayCost={\n shouldShowDisplayCost ? handleDisplayCost : undefined\n }\n onShowAgentTools={\n shouldShowAgentTools ? handleShowAgentTools : undefined\n }\n onShowSkills={shouldShowSkills ? handleShowSkills : undefined}\n onShowHooks={shouldShowHooks ? handleShowHooks : undefined}\n onTogglePublic={handleTogglePublic}\n onCopyShareLink={handleCopyShareLink}\n shareUrl={shareUrl}\n onExportTranscript={handleExportTranscript}\n onDownloadConversation={\n shouldShowDownloadConversation\n ? handleDownloadConversation\n : undefined\n }\n position=\"bottom\"\n anchorRef={ellipsisAnchorRef}\n />\n )}\n </div>\n )}\n </div>\n\n {transcriptExportModalVisible && conversationId && (\n <TranscriptExportModal\n conversationId={conversationId}\n conversationUrl={conversation.conversation_url}\n sessionApiKey={conversation.session_api_key}\n conversationTitle={conversation.title}\n model={conversation.llm_model}\n onClose={() => setTranscriptExportModalVisible(false)}\n />\n )}\n\n {/* System Message Modal /}\n <SystemMessageModal\n isOpen={systemModalVisible}\n onClose={() => setSystemModalVisible(false)}\n systemMessage={systemMessage \|\| null}\n />\n\n {/ Skills Modal /}\n {skillsModalVisible && (\n <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n )}\n\n {/ Hooks Modal /}\n {hooksModalVisible && (\n <HooksModal onClose={() => setHooksModalVisible(false)} />\n )}\n\n {/ Confirm Delete Modal */}\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={handleConfirmDelete}\n onCancel={() => setConfirmDeleteModalVisible(false)}\n conversationTitle={conversation?.title \|\| \"\"}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={handleConfirmStop}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n </>\n );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-require("../../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../../hooks/use-conversation-id.cjs"),t=require("../../../../../stores/conversation-store.cjs"),n=require("./tab-wrapper.cjs"),r=require("./tab-container.cjs"),i=require("./tab-content-area.cjs"),a=require("./conversation-tab-content-crossfade.cjs");let o=require("react"),s=require("react/jsx-runtime");var c=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/files-tab.cjs"))),l=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/browser-tab.cjs"))),u=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/planner-tab.cjs"))),d=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/task-list-tab.cjs"))),f=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../terminal/terminal.cjs"))),p={tasklist:{component:d},files:{component:c},browser:{component:l},terminal:{component:f},planner:{component:u}};function m(){let{selectedTab:c,shouldShownAgentLoading:l}=t.useConversationStore(),{conversationId:u}=e.useConversationId(),d=(0,o.useMemo)(()=>p[c]??p.files,[c]).component,f=c===`terminal`?`${c}-${u}`:c??`files`;return(0,s.jsx)(r.TabContainer,{children:(0,s.jsx)(i.TabContentArea,{children:(0,s.jsx)(a.ConversationTabContentCrossfade,{showAgentLoading:l,tabKey:f,children:(0,s.jsx)(n.TabWrapper,{children:(0,s.jsx)(d,{})},f)})})})}exports.ConversationTabContent=m;
+require("../../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../../hooks/use-conversation-id.cjs"),t=require("../../../../../stores/conversation-store.cjs"),n=require("./tab-wrapper.cjs"),r=require("./tab-container.cjs"),i=require("./tab-content-area.cjs"),a=require("./conversation-tab-content-crossfade.cjs");let o=require("react"),s=require("react/jsx-runtime");var c=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/files-tab.cjs"))),l=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/browser-tab.cjs"))),u=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/planner-tab.cjs"))),d=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/task-list-tab.cjs"))),f=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../../../routes/usage-tab.cjs"))),p=(0,o.lazy)(()=>Promise.resolve().then(()=>require("../../../terminal/terminal.cjs"))),m={tasklist:{component:d},files:{component:c},browser:{component:l},terminal:{component:p},planner:{component:u},usage:{component:f}};function h(){let{selectedTab:c,shouldShownAgentLoading:l}=t.useConversationStore(),{conversationId:u}=e.useConversationId(),d=(0,o.useMemo)(()=>m[c]??m.files,[c]).component,f=c===`terminal`?`${c}-${u}`:c??`files`;return(0,s.jsx)(r.TabContainer,{children:(0,s.jsx)(i.TabContentArea,{children:(0,s.jsx)(a.ConversationTabContentCrossfade,{showAgentLoading:l,tabKey:f,children:(0,s.jsx)(n.TabWrapper,{children:(0,s.jsx)(d,{})},f)})})})}exports.ConversationTabContent=h;
 //# sourceMappingURL=conversation-tab-content.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tab-content.cjs","names":[],"sources":["../../../../../../src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx"],"sourcesContent":["import { lazy, useMemo } from \"react\";\nimport { TabWrapper } from \"./tab-wrapper\";\nimport { TabContainer } from \"./tab-container\";\nimport { TabContentArea } from \"./tab-content-area\";\nimport { ConversationTabContentCrossfade } from \"./conversation-tab-content-crossfade\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\n\n// Lazy load all tab components, including the terminal — xterm + addon-fit +\n// xterm.css are large enough that we don't want them in the conversation\n// route's eager graph just because the terminal tab might be selected later.\nconst FilesTab = lazy(() => import(\"#/routes/files-tab\"));\nconst BrowserTab = lazy(() => import(\"#/routes/browser-tab\"));\nconst PlannerTab = lazy(() => import(\"#/routes/planner-tab\"));\nconst TaskListTab = lazy(() => import(\"#/routes/task-list-tab\"));\nconst Terminal = lazy(() => import(\"#/components/features/terminal/terminal\"));\n\nconst TAB_CONFIG = {\n tasklist: { component: TaskListTab },\n files: { component: FilesTab },\n browser: { component: BrowserTab },\n terminal: { component: Terminal },\n planner: { component: PlannerTab },\n};\n\nexport function ConversationTabContent() {\n const { selectedTab, shouldShownAgentLoading } = useConversationStore();\n const { conversationId } = useConversationId();\n\n const activeTab = useMemo(\n () =>\n TAB_CONFIG[selectedTab as keyof typeof TAB_CONFIG] ?? TAB_CONFIG.files,\n [selectedTab],\n );\n\n const ActiveComponent = activeTab.component;\n\n const tabWrapperKey =\n selectedTab === \"terminal\"\n ? `${selectedTab}-${conversationId}`\n : (selectedTab ?? \"files\");\n\n return (\n <TabContainer>\n <TabContentArea>\n <ConversationTabContentCrossfade\n showAgentLoading={shouldShownAgentLoading}\n tabKey={tabWrapperKey}\n >\n <TabWrapper key={tabWrapperKey}>\n <ActiveComponent />\n </TabWrapper>\n </ConversationTabContentCrossfade>\n </TabContentArea>\n </TabContainer>\n );\n}\n"],"mappings":"mYAWA,IAAM,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAsB,qCAAA,CAAA,CAA4B,EAClD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAwB,uCAAA,CAAA,CAA8B,EACtD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAwB,uCAAA,CAAA,CAA8B,EACtD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAyB,yCAAA,CAAA,CAAgC,EACzD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAsB,gCAAA,CAAA,CAAiD,EAEvE,EAAa,CACjB,SAAU,CAAE,UAAW,CAAY,EACnC,MAAO,CAAE,UAAW,CAAS,EAC7B,QAAS,CAAE,UAAW,CAAW,EACjC,SAAU,CAAE,UAAW,CAAS,EAChC,QAAS,CAAE,UAAW,CAAW,~~CACnC~~,EAEA,SAAgB,GAAyB,CACvC,GAAM,CAAE,cAAa,2BAA4B,EAAA,qBAAqB,EAChE,CAAE,kBAAmB,EAAA,kBAAkB,EAQvC,GAAA,EAAA,EAAA,aAJF,EAAW,IAA2C,EAAW,MACnE,CAAC,CAAW,CAGU,EAAU,UAE5B,EACJ,IAAgB,WACZ,GAAG,EAAY,GAAG,IACjB,GAAe,QAEtB,OACE,EAAA,EAAA,KAAC,EAAA,aAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,iBAAkB,EAClB,OAAQ,YAER,EAAA,EAAA,KAAC,EAAA,WAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAD,CAAkB,CAAA,CACR,EAFK,CAEL,CACmB,CAAA,CACnB,CAAA,CACJ,CAAA,CAElB"}
1	+ {"version":3,"file":"conversation-tab-content.cjs","names":[],"sources":["../../../../../../src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx"],"sourcesContent":["import { lazy, useMemo } from \"react\";\nimport { TabWrapper } from \"./tab-wrapper\";\nimport { TabContainer } from \"./tab-container\";\nimport { TabContentArea } from \"./tab-content-area\";\nimport { ConversationTabContentCrossfade } from \"./conversation-tab-content-crossfade\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\n\n// Lazy load all tab components, including the terminal — xterm + addon-fit +\n// xterm.css are large enough that we don't want them in the conversation\n// route's eager graph just because the terminal tab might be selected later.\nconst FilesTab = lazy(() => import(\"#/routes/files-tab\"));\nconst BrowserTab = lazy(() => import(\"#/routes/browser-tab\"));\nconst PlannerTab = lazy(() => import(\"#/routes/planner-tab\"));\nconst TaskListTab = lazy(() => import(\"#/routes/task-list-tab\"));\nconst UsageTab = lazy(() => import(\"#/routes/usage-tab\"));\nconst Terminal = lazy(() => import(\"#/components/features/terminal/terminal\"));\n\nconst TAB_CONFIG = {\n tasklist: { component: TaskListTab },\n files: { component: FilesTab },\n browser: { component: BrowserTab },\n terminal: { component: Terminal },\n planner: { component: PlannerTab },\n usage: { component: UsageTab },\n};\n\nexport function ConversationTabContent() {\n const { selectedTab, shouldShownAgentLoading } = useConversationStore();\n const { conversationId } = useConversationId();\n\n const activeTab = useMemo(\n () =>\n TAB_CONFIG[selectedTab as keyof typeof TAB_CONFIG] ?? TAB_CONFIG.files,\n [selectedTab],\n );\n\n const ActiveComponent = activeTab.component;\n\n const tabWrapperKey =\n selectedTab === \"terminal\"\n ? `${selectedTab}-${conversationId}`\n : (selectedTab ?? \"files\");\n\n return (\n <TabContainer>\n <TabContentArea>\n <ConversationTabContentCrossfade\n showAgentLoading={shouldShownAgentLoading}\n tabKey={tabWrapperKey}\n >\n <TabWrapper key={tabWrapperKey}>\n <ActiveComponent />\n </TabWrapper>\n </ConversationTabContentCrossfade>\n </TabContentArea>\n </TabContainer>\n );\n}\n"],"mappings":"mYAWA,IAAM,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAsB,qCAAA,CAAA,CAA4B,EAClD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAwB,uCAAA,CAAA,CAA8B,EACtD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAwB,uCAAA,CAAA,CAA8B,EACtD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAyB,yCAAA,CAAA,CAAgC,EACzD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAsB,qCAAA,CAAA,CAA4B,EAClD,GAAA,EAAA,EAAA,UAAA,QAAA,QAAA,EAAA,SAAA,QAAsB,gCAAA,CAAA,CAAiD,EAEvE,EAAa,CACjB,SAAU,CAAE,UAAW,CAAY,EACnC,MAAO,CAAE,UAAW,CAAS,EAC7B,QAAS,CAAE,UAAW,CAAW,EACjC,SAAU,CAAE,UAAW,CAAS,EAChC,QAAS,CAAE,UAAW,CAAW,EACjC,MAAO,CAAE,UAAW,CAAS,CAC/B,EAEA,SAAgB,GAAyB,CACvC,GAAM,CAAE,cAAa,2BAA4B,EAAA,qBAAqB,EAChE,CAAE,kBAAmB,EAAA,kBAAkB,EAQvC,GAAA,EAAA,EAAA,aAJF,EAAW,IAA2C,EAAW,MACnE,CAAC,CAAW,CAGU,EAAU,UAE5B,EACJ,IAAgB,WACZ,GAAG,EAAY,GAAG,IACjB,GAAe,QAEtB,OACE,EAAA,EAAA,KAAC,EAAA,aAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,iBAAkB,EAClB,OAAQ,YAER,EAAA,EAAA,KAAC,EAAA,WAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAD,CAAkB,CAAA,CACR,EAFK,CAEL,CACmB,CAAA,CACnB,CAAA,CACJ,CAAA,CAElB"}

package/dist/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.js CHANGED Viewed

@@ -7,15 +7,16 @@ import { ConversationTabContentCrossfade as a } from "./conversation-tab-content
 import { lazy as o, useMemo as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx
-var l = o(() => import("../../../../../routes/files-tab.js")), u = o(() => import("../../../../../routes/browser-tab.js")), d = o(() => import("../../../../../routes/planner-tab.js")), f = o(() => import("../../../../../routes/task-list-tab.js")), p = o(() => import("../../../terminal/terminal.js")), m = {
+var l = o(() => import("../../../../../routes/files-tab.js")), u = o(() => import("../../../../../routes/browser-tab.js")), d = o(() => import("../../../../../routes/planner-tab.js")), f = o(() => import("../../../../../routes/task-list-tab.js")), p = o(() => import("../../../../../routes/usage-tab.js")), m = o(() => import("../../../terminal/terminal.js")), h = {
 	tasklist: { component: f },
 	files: { component: l },
 	browser: { component: u },
-	terminal: { component: p },
-	planner: { component: d }
+	terminal: { component: m },
+	planner: { component: d },
+	usage: { component: p }
 };
-function h() {
-	let { selectedTab: o, shouldShownAgentLoading: l } = t(), { conversationId: u } = e(), d = s(() => m[o] ?? m.files, [o]).component, f = o === "terminal" ? `${o}-${u}` : o ?? "files";
+function g() {
+	let { selectedTab: o, shouldShownAgentLoading: l } = t(), { conversationId: u } = e(), d = s(() => h[o] ?? h.files, [o]).component, f = o === "terminal" ? `${o}-${u}` : o ?? "files";
 	return /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(a, {
 		showAgentLoading: l,
 		tabKey: f,
@@ -23,6 +24,6 @@ function h() {
 	}) }) });
 }
 //#endregion
-export { h as ConversationTabContent };
+export { g as ConversationTabContent };
 //# sourceMappingURL=conversation-tab-content.js.map

package/dist/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tab-content.js","names":[],"sources":["../../../../../../src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx"],"sourcesContent":["import { lazy, useMemo } from \"react\";\nimport { TabWrapper } from \"./tab-wrapper\";\nimport { TabContainer } from \"./tab-container\";\nimport { TabContentArea } from \"./tab-content-area\";\nimport { ConversationTabContentCrossfade } from \"./conversation-tab-content-crossfade\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\n\n// Lazy load all tab components, including the terminal — xterm + addon-fit +\n// xterm.css are large enough that we don't want them in the conversation\n// route's eager graph just because the terminal tab might be selected later.\nconst FilesTab = lazy(() => import(\"#/routes/files-tab\"));\nconst BrowserTab = lazy(() => import(\"#/routes/browser-tab\"));\nconst PlannerTab = lazy(() => import(\"#/routes/planner-tab\"));\nconst TaskListTab = lazy(() => import(\"#/routes/task-list-tab\"));\nconst Terminal = lazy(() => import(\"#/components/features/terminal/terminal\"));\n\nconst TAB_CONFIG = {\n tasklist: { component: TaskListTab },\n files: { component: FilesTab },\n browser: { component: BrowserTab },\n terminal: { component: Terminal },\n planner: { component: PlannerTab },\n};\n\nexport function ConversationTabContent() {\n const { selectedTab, shouldShownAgentLoading } = useConversationStore();\n const { conversationId } = useConversationId();\n\n const activeTab = useMemo(\n () =>\n TAB_CONFIG[selectedTab as keyof typeof TAB_CONFIG] ?? TAB_CONFIG.files,\n [selectedTab],\n );\n\n const ActiveComponent = activeTab.component;\n\n const tabWrapperKey =\n selectedTab === \"terminal\"\n ? `${selectedTab}-${conversationId}`\n : (selectedTab ?? \"files\");\n\n return (\n <TabContainer>\n <TabContentArea>\n <ConversationTabContentCrossfade\n showAgentLoading={shouldShownAgentLoading}\n tabKey={tabWrapperKey}\n >\n <TabWrapper key={tabWrapperKey}>\n <ActiveComponent />\n </TabWrapper>\n </ConversationTabContentCrossfade>\n </TabContentArea>\n </TabContainer>\n );\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAW,QAAW,OAAO,qCAAqB,GAClD,IAAa,QAAW,OAAO,uCAAuB,GACtD,IAAa,QAAW,OAAO,uCAAuB,GACtD,IAAc,QAAW,OAAO,yCAAyB,GACzD,IAAW,QAAW,OAAO,gCAA0C,GAEvE,IAAa;CACjB,UAAU,EAAE,WAAW,EAAY;CACnC,OAAO,EAAE,WAAW,EAAS;CAC7B,SAAS,EAAE,WAAW,EAAW;CACjC,UAAU,EAAE,WAAW,EAAS;CAChC,SAAS,EAAE,WAAW,EAAW;~~AACnC~~;AAEA,SAAgB,IAAyB;CACvC,IAAM,EAAE,gBAAa,+BAA4B,EAAqB,GAChE,EAAE,sBAAmB,EAAkB,GAQvC,IANY,QAEd,EAAW,MAA2C,EAAW,OACnE,CAAC,CAAW,CAGU,EAAU,WAE5B,IACJ,MAAgB,aACZ,GAAG,EAAY,GAAG,MACjB,KAAe;CAEtB,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,kBAAkB;EAClB,QAAQ;YAER,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAkB,CAAA,EACR,GAFK,CAEL;CACmB,CAAA,EACnB,CAAA,EACJ,CAAA;AAElB"}
1	+ {"version":3,"file":"conversation-tab-content.js","names":[],"sources":["../../../../../../src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx"],"sourcesContent":["import { lazy, useMemo } from \"react\";\nimport { TabWrapper } from \"./tab-wrapper\";\nimport { TabContainer } from \"./tab-container\";\nimport { TabContentArea } from \"./tab-content-area\";\nimport { ConversationTabContentCrossfade } from \"./conversation-tab-content-crossfade\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\n\n// Lazy load all tab components, including the terminal — xterm + addon-fit +\n// xterm.css are large enough that we don't want them in the conversation\n// route's eager graph just because the terminal tab might be selected later.\nconst FilesTab = lazy(() => import(\"#/routes/files-tab\"));\nconst BrowserTab = lazy(() => import(\"#/routes/browser-tab\"));\nconst PlannerTab = lazy(() => import(\"#/routes/planner-tab\"));\nconst TaskListTab = lazy(() => import(\"#/routes/task-list-tab\"));\nconst UsageTab = lazy(() => import(\"#/routes/usage-tab\"));\nconst Terminal = lazy(() => import(\"#/components/features/terminal/terminal\"));\n\nconst TAB_CONFIG = {\n tasklist: { component: TaskListTab },\n files: { component: FilesTab },\n browser: { component: BrowserTab },\n terminal: { component: Terminal },\n planner: { component: PlannerTab },\n usage: { component: UsageTab },\n};\n\nexport function ConversationTabContent() {\n const { selectedTab, shouldShownAgentLoading } = useConversationStore();\n const { conversationId } = useConversationId();\n\n const activeTab = useMemo(\n () =>\n TAB_CONFIG[selectedTab as keyof typeof TAB_CONFIG] ?? TAB_CONFIG.files,\n [selectedTab],\n );\n\n const ActiveComponent = activeTab.component;\n\n const tabWrapperKey =\n selectedTab === \"terminal\"\n ? `${selectedTab}-${conversationId}`\n : (selectedTab ?? \"files\");\n\n return (\n <TabContainer>\n <TabContentArea>\n <ConversationTabContentCrossfade\n showAgentLoading={shouldShownAgentLoading}\n tabKey={tabWrapperKey}\n >\n <TabWrapper key={tabWrapperKey}>\n <ActiveComponent />\n </TabWrapper>\n </ConversationTabContentCrossfade>\n </TabContentArea>\n </TabContainer>\n );\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAW,QAAW,OAAO,qCAAqB,GAClD,IAAa,QAAW,OAAO,uCAAuB,GACtD,IAAa,QAAW,OAAO,uCAAuB,GACtD,IAAc,QAAW,OAAO,yCAAyB,GACzD,IAAW,QAAW,OAAO,qCAAqB,GAClD,IAAW,QAAW,OAAO,gCAA0C,GAEvE,IAAa;CACjB,UAAU,EAAE,WAAW,EAAY;CACnC,OAAO,EAAE,WAAW,EAAS;CAC7B,SAAS,EAAE,WAAW,EAAW;CACjC,UAAU,EAAE,WAAW,EAAS;CAChC,SAAS,EAAE,WAAW,EAAW;CACjC,OAAO,EAAE,WAAW,EAAS;AAC/B;AAEA,SAAgB,IAAyB;CACvC,IAAM,EAAE,gBAAa,+BAA4B,EAAqB,GAChE,EAAE,sBAAmB,EAAkB,GAQvC,IANY,QAEd,EAAW,MAA2C,EAAW,OACnE,CAAC,CAAW,CAGU,EAAU,WAE5B,IACJ,MAAgB,aACZ,GAAG,EAAY,GAAG,MACjB,KAAe;CAEtB,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,kBAAkB;EAClB,QAAQ;YAER,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAkB,CAAA,EACR,GAFK,CAEL;CACmB,CAAA,EACnB,CAAA,EACJ,CAAA;AAElB"}

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