@openhands/agent-canvas 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/components/features/chat/components/chat-input-model.js

@@ -1,115 +1,116 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../../i18n/declaration.js";
 import { cn as n } from "../../../../utils/utils.js";
-import r from "../../../../icons/checkmark.js";
-import { Typography as i } from "../../../../ui/typography.js";
-import { ComboboxCaretInline as a } from "../../../../ui/combobox-caret.js";
-import { ContextMenu as o } from "../../../../ui/context-menu.js";
-import { ContextMenuListItem as s } from "../../context-menu/context-menu-list-item.js";
-import { useClickOutsideElement as c } from "../../../../hooks/use-click-outside-element.js";
-import { useChatInputModelState as l } from "../../../../hooks/use-chat-input-model-state.js";
-import { useSwitchAcpModel as u } from "../../../../hooks/mutation/use-switch-acp-model.js";
-import d from "../../../../icons/settings-gear.js";
-import { NavigationLink as f } from "../../../shared/navigation-link.js";
-import { Divider as p } from "../../../../ui/divider.js";
-import m from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { chatInputPillButtonClassName as r } from "../../../../utils/form-control-classes.js";
+import i from "../../../../icons/checkmark.js";
+import { Typography as a } from "../../../../ui/typography.js";
+import { ComboboxCaretInline as o } from "../../../../ui/combobox-caret.js";
+import { ContextMenu as s } from "../../../../ui/context-menu.js";
+import { ContextMenuListItem as c } from "../../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as l } from "../../../../hooks/use-click-outside-element.js";
+import { useChatInputModelState as u } from "../../../../hooks/use-chat-input-model-state.js";
+import { useSwitchAcpModel as d } from "../../../../hooks/mutation/use-switch-acp-model.js";
+import f from "../../../../icons/settings-gear.js";
+import { NavigationLink as p } from "../../../shared/navigation-link.js";
+import { Divider as m } from "../../../../ui/divider.js";
+import h from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/features/chat/components/chat-input-model.tsx
-var v = 10, y = 22;
-function b(e, t = v) {
+var y = 10, b = 22;
+function x(e, t = y) {
 	return e.length <= t ? e : `${e.slice(0, t)}…`;
 }
-function x({ model: a, onClose: o, dividerInset: c, settingsLinkClassName: l, settingsIconClassName: m }) {
-	let { t: v } = e("openhands"), y = u(), b = a.showAcpPicker || !!a.displayModel, x = (e) => {
-		e !== a.currentModelId && y.mutate({
-			conversationId: a.switchConversationId,
+function S({ model: r, onClose: o, dividerInset: s, settingsLinkClassName: l, settingsIconClassName: u }) {
+	let { t: h } = e("openhands"), y = d(), b = r.showAcpPicker || !!r.displayModel, x = (e) => {
+		e !== r.currentModelId && y.mutate({
+			conversationId: r.switchConversationId,
 			model: e
 		}), o();
 	};
-	return /* @__PURE__ */ _(h, { children: [
-		a.showAcpPicker ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("li", {
+	return /* @__PURE__ */ v(g, { children: [
+		r.showAcpPicker ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("li", {
 			role: "presentation",
 			className: "px-2 pt-1 pb-0.5",
-			children: /* @__PURE__ */ g(i.Text, {
+			children: /* @__PURE__ */ _(a.Text, {
 				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
-				children: v(t.MODEL$AVAILABLE_MODELS)
+				children: h(t.MODEL$AVAILABLE_MODELS)
 			})
-		}), a.availableAcpModels.map((e) => {
-			let t = e.id === a.currentModelId;
-			return /* @__PURE__ */ _(s, {
+		}), r.availableAcpModels.map((e) => {
+			let t = e.id === r.currentModelId;
+			return /* @__PURE__ */ v(c, {
 				testId: `chat-input-acp-model-option-${e.id}`,
 				onClick: (t) => {
 					t.preventDefault(), t.stopPropagation(), x(e.id);
 				},
 				className: n("flex items-center gap-2", t && "bg-[var(--oh-interactive-hover)]"),
-				children: [/* @__PURE__ */ g("span", {
+				children: [/* @__PURE__ */ _("span", {
 					className: "flex-1 truncate text-sm leading-5",
 					title: e.label,
 					children: e.label
-				}), t && /* @__PURE__ */ g(r, {
+				}), t && /* @__PURE__ */ _(i, {
 					width: 14,
 					height: 14,
 					className: "shrink-0",
 					"aria-hidden": !0
 				})]
 			}, e.id);
-		})] }) : a.displayModel ? /* @__PURE__ */ g("li", {
+		})] }) : r.displayModel ? /* @__PURE__ */ _("li", {
 			className: "text-sm",
-			children: /* @__PURE__ */ g("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "p-2 leading-5 text-[var(--oh-foreground)] break-all",
-				children: a.displayModel
+				children: r.displayModel
 			})
 		}) : null,
-		b && /* @__PURE__ */ g(p, { inset: c }),
-		/* @__PURE__ */ g("li", {
+		b && /* @__PURE__ */ _(m, { inset: s }),
+		/* @__PURE__ */ _("li", {
 			className: "text-sm",
-			children: /* @__PURE__ */ _(f, {
-				to: a.destinationPath,
+			children: /* @__PURE__ */ v(p, {
+				to: r.destinationPath,
 				onClick: o,
 				className: n("flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors", l),
-				children: [/* @__PURE__ */ g(d, {
+				children: [/* @__PURE__ */ _(f, {
 					width: 16,
 					height: 16,
-					className: n("shrink-0", m),
+					className: n("shrink-0", u),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ g("span", { children: a.destinationLabel })]
+				}), /* @__PURE__ */ _("span", { children: r.destinationLabel })]
 			})
 		})
 	] });
 }
-function S() {
-	let e = l(), [t, r] = m.useState(!1), i = m.useRef(null), s = c(() => r(!1), i);
+function C() {
+	let e = u(), [t, n] = h.useState(!1), i = h.useRef(null), a = l(() => n(!1), i);
 	if (!e.displayModel) return null;
-	let u = b(e.displayModel, e.isAcpContext ? y : v);
-	return /* @__PURE__ */ _("div", {
+	let c = x(e.displayModel, e.isAcpContext ? b : y);
+	return /* @__PURE__ */ v("div", {
 		className: "relative min-w-0",
-		children: [/* @__PURE__ */ _("button", {
+		children: [/* @__PURE__ */ v("button", {
 			ref: i,
 			type: "button",
-			className: n("inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none", "hover:text-white hover:bg-white/10 cursor-pointer"),
+			className: r,
 			title: e.displayModel,
 			"data-testid": "chat-input-llm-model",
 			"aria-expanded": t,
 			"aria-haspopup": "dialog",
 			onClick: (e) => {
-				e.preventDefault(), e.stopPropagation(), r((e) => !e);
+				e.preventDefault(), e.stopPropagation(), n((e) => !e);
 			},
-			children: [/* @__PURE__ */ g("span", { children: u }), /* @__PURE__ */ g(a, { isOpen: t })]
-		}), t && /* @__PURE__ */ g(o, {
-			ref: s,
+			children: [/* @__PURE__ */ _("span", { children: c }), /* @__PURE__ */ _(o, { isOpen: t })]
+		}), t && /* @__PURE__ */ _(s, {
+			ref: a,
 			testId: "chat-input-llm-model-popover",
 			position: "top",
 			alignment: "left",
 			spacing: "none",
 			className: "z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto",
-			children: /* @__PURE__ */ g(x, {
+			children: /* @__PURE__ */ _(S, {
 				model: e,
-				onClose: () => r(!1)
+				onClose: () => n(!1)
 			})
 		})]
 	});
 }
 //#endregion
-export { S as ChatInputModel, x as ChatInputModelMenuContent };
+export { C as ChatInputModel, S as ChatInputModelMenuContent };
 
 //# sourceMappingURL=chat-input-model.js.map

package/dist/components/features/chat/components/chat-input-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-model.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-model.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport {\n  useChatInputModelState,\n  type ChatInputModelState,\n} from \"#/hooks/use-chat-input-model-state\";\nimport { useSwitchAcpModel } from \"#/hooks/mutation/use-switch-acp-model\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport React from \"react\";\n\nconst MODEL_LABEL_MAX_CHARS = 10;\n// ACP surfaces show the provider's human label (e.g. \"Claude Opus 4.7\"),\n// which is longer than a raw model id, so the inline button gets a wider cap\n// before truncating. The full string still shows in the title + popover.\nconst ACP_MODEL_LABEL_MAX_CHARS = 22;\n\nfunction truncateModelLabel(\n  model: string,\n  maxChars: number = MODEL_LABEL_MAX_CHARS,\n): string {\n  if (model.length <= maxChars) {\n    return model;\n  }\n  return `${model.slice(0, maxChars)}…`;\n}\n\ninterface ChatInputModelMenuContentProps {\n  model: ChatInputModelState;\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\nexport function ChatInputModelMenuContent({\n  model,\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputModelMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const switchAcpModel = useSwitchAcpModel();\n  const hasModelRows = model.showAcpPicker || Boolean(model.displayModel);\n\n  const handleSelectAcpModel = (modelId: string) => {\n    if (modelId !== model.currentModelId) {\n      switchAcpModel.mutate({\n        conversationId: model.switchConversationId,\n        model: modelId,\n      });\n    }\n    onClose();\n  };\n\n  return (\n    <>\n      {model.showAcpPicker ? (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the section label as a\n              selectable menu item (the label text is still announced). */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.MODEL$AVAILABLE_MODELS)}\n            </Typography.Text>\n          </li>\n          {model.availableAcpModels.map((option) => {\n            const isSelected = option.id === model.currentModelId;\n            return (\n              <ContextMenuListItem\n                key={option.id}\n                testId={`chat-input-acp-model-option-${option.id}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  handleSelectAcpModel(option.id);\n                }}\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isSelected && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span\n                  className=\"flex-1 truncate text-sm leading-5\"\n                  title={option.label}\n                >\n                  {option.label}\n                </span>\n                {isSelected && (\n                  <CheckIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0\"\n                    aria-hidden\n                  />\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      ) : model.displayModel ? (\n        <li className=\"text-sm\">\n          <div className=\"p-2 leading-5 text-[var(--oh-foreground)] break-all\">\n            {model.displayModel}\n          </div>\n        </li>\n      ) : null}\n      {hasModelRows && <Divider inset={dividerInset} />}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to={model.destinationPath}\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{model.destinationLabel}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputModel() {\n  const model = useChatInputModelState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  if (!model.displayModel) {\n    return null;\n  }\n\n  const truncatedModelLabel = truncateModelLabel(\n    model.displayModel,\n    model.isAcpContext ? ACP_MODEL_LABEL_MAX_CHARS : MODEL_LABEL_MAX_CHARS,\n  );\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none\",\n          \"hover:text-white hover:bg-white/10 cursor-pointer\",\n        )}\n        title={model.displayModel}\n        data-testid=\"chat-input-llm-model\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span>{truncatedModelLabel}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-model-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputModelMenuContent\n            model={model}\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAM,IAAwB,IAIxB,IAA4B;AAElC,SAAS,EACP,GACA,IAAmB,GACX;AAIR,QAHI,EAAM,UAAU,IACX,IAEF,GAAG,EAAM,MAAM,GAAG,EAAS,CAAC;;AAWrC,SAAgB,EAA0B,EACxC,UACA,YACA,iBACA,0BACA,4BACiC;CACjC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAiB,GAAmB,EACpC,IAAe,EAAM,iBAAiB,EAAQ,EAAM,cAEpD,KAAwB,MAAoB;AAOhD,EANI,MAAY,EAAM,kBACpB,EAAe,OAAO;GACpB,gBAAgB,EAAM;GACtB,OAAO;GACR,CAAC,EAEJ,GAAS;;AAGX,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAM,gBACL,kBAAA,GAAA,EAAA,UAAA,CAIE,kBAAC,MAAD;GAAI,MAAK;GAAe,WAAU;aAChC,kBAAC,EAAW,MAAZ;IAAiB,WAAU;cACxB,EAAE,EAAQ,uBAAuB;IAClB,CAAA;GACf,CAAA,EACJ,EAAM,mBAAmB,KAAK,MAAW;GACxC,IAAM,IAAa,EAAO,OAAO,EAAM;AACvC,UACE,kBAAC,GAAD;IAEE,QAAQ,+BAA+B,EAAO;IAC9C,UAAU,MAAU;AAGlB,KAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAqB,EAAO,GAAG;;IAEjC,WAAW,EACT,2BACA,KAAc,mCACf;cAXH,CAaE,kBAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAO;eAEb,EAAO;KACH,CAAA,EACN,KACC,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAU;KACV,eAAA;KACA,CAAA,CAEgB;MA1Bf,EAAO,GA0BQ;IAExB,CACD,EAAA,CAAA,GACD,EAAM,eACR,kBAAC,MAAD;GAAI,WAAU;aACZ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM;IACH,CAAA;GACH,CAAA,GACH;EACH,KAAgB,kBAAC,GAAD,EAAS,OAAO,GAAgB,CAAA;EACjD,kBAAC,MAAD;GAAI,WAAU;aACZ,kBAAC,GAAD;IACE,IAAI,EAAM;IACV,SAAS;IACT,WAAW,EACT,+IACA,EACD;cANH,CAQE,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAW,EAAG,YAAY,EAAsB;KAChD,eAAA;KACA,CAAA,EACF,kBAAC,QAAD,EAAA,UAAO,EAAM,kBAAwB,CAAA,CACtB;;GACd,CAAA;EACJ,EAAA,CAAA;;AAIP,SAAgB,IAAiB;CAC/B,IAAM,IAAQ,GAAwB,EAChC,CAAC,GAAe,KAAoB,EAAM,SAAS,GAAM,EACzD,IAAa,EAAM,OAA0B,KAAK,EAClD,IAAa,QACX,EAAiB,GAAM,EAC7B,EACD;AAED,KAAI,CAAC,EAAM,aACT,QAAO;CAGT,IAAM,IAAsB,EAC1B,EAAM,cACN,EAAM,eAAe,IAA4B,EAClD;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW,EACT,2QACA,oDACD;GACD,OAAO,EAAM;GACb,eAAY;GACZ,iBAAe;GACf,iBAAc;GACd,UAAU,MAAU;AAGlB,IAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,GAAkB,MAAS,CAAC,EAAK;;aAdrC,CAiBE,kBAAC,QAAD,EAAA,UAAO,GAA2B,CAAA,EAClC,kBAAC,GAAD,EAAqB,QAAQ,GAAiB,CAAA,CACvC;MAER,KACC,kBAAC,GAAD;GACE,KAAK;GACL,QAAO;GACP,UAAS;GACT,WAAU;GACV,SAAQ;GACR,WAAU;aAEV,kBAAC,GAAD;IACS;IACP,eAAe,EAAiB,GAAM;IACtC,CAAA;GACU,CAAA,CAEZ"}
+{"version":3,"file":"chat-input-model.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-model.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport {\n  useChatInputModelState,\n  type ChatInputModelState,\n} from \"#/hooks/use-chat-input-model-state\";\nimport { useSwitchAcpModel } from \"#/hooks/mutation/use-switch-acp-model\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport React from \"react\";\n\nconst MODEL_LABEL_MAX_CHARS = 10;\n// ACP surfaces show the provider's human label (e.g. \"Claude Opus 4.7\"),\n// which is longer than a raw model id, so the inline button gets a wider cap\n// before truncating. The full string still shows in the title + popover.\nconst ACP_MODEL_LABEL_MAX_CHARS = 22;\n\nfunction truncateModelLabel(\n  model: string,\n  maxChars: number = MODEL_LABEL_MAX_CHARS,\n): string {\n  if (model.length <= maxChars) {\n    return model;\n  }\n  return `${model.slice(0, maxChars)}…`;\n}\n\ninterface ChatInputModelMenuContentProps {\n  model: ChatInputModelState;\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\nexport function ChatInputModelMenuContent({\n  model,\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputModelMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const switchAcpModel = useSwitchAcpModel();\n  const hasModelRows = model.showAcpPicker || Boolean(model.displayModel);\n\n  const handleSelectAcpModel = (modelId: string) => {\n    if (modelId !== model.currentModelId) {\n      switchAcpModel.mutate({\n        conversationId: model.switchConversationId,\n        model: modelId,\n      });\n    }\n    onClose();\n  };\n\n  return (\n    <>\n      {model.showAcpPicker ? (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the section label as a\n              selectable menu item (the label text is still announced). */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.MODEL$AVAILABLE_MODELS)}\n            </Typography.Text>\n          </li>\n          {model.availableAcpModels.map((option) => {\n            const isSelected = option.id === model.currentModelId;\n            return (\n              <ContextMenuListItem\n                key={option.id}\n                testId={`chat-input-acp-model-option-${option.id}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  handleSelectAcpModel(option.id);\n                }}\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isSelected && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span\n                  className=\"flex-1 truncate text-sm leading-5\"\n                  title={option.label}\n                >\n                  {option.label}\n                </span>\n                {isSelected && (\n                  <CheckIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0\"\n                    aria-hidden\n                  />\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      ) : model.displayModel ? (\n        <li className=\"text-sm\">\n          <div className=\"p-2 leading-5 text-[var(--oh-foreground)] break-all\">\n            {model.displayModel}\n          </div>\n        </li>\n      ) : null}\n      {hasModelRows && <Divider inset={dividerInset} />}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to={model.destinationPath}\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{model.destinationLabel}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputModel() {\n  const model = useChatInputModelState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  if (!model.displayModel) {\n    return null;\n  }\n\n  const truncatedModelLabel = truncateModelLabel(\n    model.displayModel,\n    model.isAcpContext ? ACP_MODEL_LABEL_MAX_CHARS : MODEL_LABEL_MAX_CHARS,\n  );\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={chatInputPillButtonClassName}\n        title={model.displayModel}\n        data-testid=\"chat-input-llm-model\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span>{truncatedModelLabel}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-model-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputModelMenuContent\n            model={model}\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/slash-command-menu.cjs

@@ -1,3 +1,3 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../utils/utils.cjs`),r=require(`../../../../ui/typography.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o(e){return e.replace(/!\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\*{3}(.+?)\*{3}/g,`$1`).replace(/\*{2}(.+?)\*{2}/g,`$1`).replace(/\*(.+?)\*/g,`$1`).replace(/_{3}(.+?)_{3}/g,`$1`).replace(/_{2}(.+?)_{2}/g,`$1`).replace(/_(.+?)_/g,`$1`).replace(/`(.+?)`/g,`$1`).replace(/~~(.+?)~~/g,`$1`)}function s(e){let t=e,n=e.match(/^---\s*\n([\s\S]*?)\n---/);if(n){let r=n[1].match(/^description:\s*(.+)$/m);if(r){let e=r[1].trim();return(e.startsWith(`"`)&&e.endsWith(`"`)||e.startsWith(`'`)&&e.endsWith(`'`))&&(e=e.slice(1,-1)),o(e)}t=e.slice(n[0].length)}let r=t.split(`
-`).map(e=>e.trim()).find(e=>e.length>0&&!e.startsWith(`#`)&&e!==`---`);if(!r)return null;let i=o(r);return i.match(/^[^.!?\n]*[.!?]/)?.[0]||i}function c({item:e,isSelected:t,onSelect:c,ref:l}){let u=(0,i.useMemo)(()=>`description`in e.skill&&e.skill.description?o(e.skill.description):`content`in e.skill&&e.skill.content?s(e.skill.content):null,[e.skill]);return(0,a.jsxs)(`button`,{role:`option`,"aria-selected":t,ref:l,type:`button`,className:n.cn(`w-full px-3 py-2.5 text-left transition-colors`,t?`bg-tertiary`:`hover:bg-[var(--oh-surface-raised)]`),onMouseDown:t=>{t.preventDefault(),c(e)},children:[(0,a.jsx)(r.Text,{className:`font-normal`,children:e.command}),u&&(0,a.jsx)(r.Text,{className:`text-xs text-[var(--oh-muted)] mt-0.5 truncate block`,children:u})]})}function l({items:e,selectedIndex:n,onSelect:r}){let{t:o}=t.useTranslation(`openhands`),s=(0,i.useRef)([]);return(0,i.useEffect)(()=>{s.current=s.current.slice(0,e.length)},[e.length]),(0,i.useEffect)(()=>{let e=s.current[n];e&&e.scrollIntoView({block:`nearest`})},[n]),e.length===0?null:(0,a.jsxs)(`div`,{role:`listbox`,"aria-label":o(`CHAT_INTERFACE$COMMANDS`),className:`absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50`,"data-testid":`slash-command-menu`,children:[(0,a.jsx)(`div`,{className:`px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]`,children:o(`CHAT_INTERFACE$COMMANDS`)}),e.map((e,t)=>(0,a.jsx)(c,{item:e,isSelected:t===n,onSelect:r,ref:e=>{s.current[t]=e}},e.command))]})}exports.SlashCommandMenu=l;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../utils/utils.cjs`),r=require(`../../../../ui/typography.cjs`),i=require(`../../../../utils/dropdown-classes.cjs`);let a=require(`react`);a=e.__toESM(a,1);let o=require(`react/jsx-runtime`);function s(e){return e.replace(/!\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\*{3}(.+?)\*{3}/g,`$1`).replace(/\*{2}(.+?)\*{2}/g,`$1`).replace(/\*(.+?)\*/g,`$1`).replace(/_{3}(.+?)_{3}/g,`$1`).replace(/_{2}(.+?)_{2}/g,`$1`).replace(/_(.+?)_/g,`$1`).replace(/`(.+?)`/g,`$1`).replace(/~~(.+?)~~/g,`$1`)}function c(e){let t=e,n=e.match(/^---\s*\n([\s\S]*?)\n---/);if(n){let r=n[1].match(/^description:\s*(.+)$/m);if(r){let e=r[1].trim();return(e.startsWith(`"`)&&e.endsWith(`"`)||e.startsWith(`'`)&&e.endsWith(`'`))&&(e=e.slice(1,-1)),s(e)}t=e.slice(n[0].length)}let r=t.split(`
+`).map(e=>e.trim()).find(e=>e.length>0&&!e.startsWith(`#`)&&e!==`---`);if(!r)return null;let i=s(r);return i.match(/^[^.!?\n]*[.!?]/)?.[0]||i}function l({item:e,isSelected:t,onSelect:l,ref:u}){let d=(0,a.useMemo)(()=>`description`in e.skill&&e.skill.description?s(e.skill.description):`content`in e.skill&&e.skill.content?c(e.skill.content):null,[e.skill]);return(0,o.jsxs)(`button`,{role:`option`,"aria-selected":t,ref:u,type:`button`,className:n.cn(`w-full px-3 py-2.5 text-left`,i.dropdownInstantColorClassName,t?`bg-tertiary`:`hover:bg-[var(--oh-surface-raised)]`),onMouseDown:t=>{t.preventDefault(),l(e)},children:[(0,o.jsx)(r.Text,{className:`font-normal`,children:e.command}),d&&(0,o.jsx)(r.Text,{className:`text-xs text-[var(--oh-muted)] mt-0.5 truncate block`,children:d})]})}function u({items:e,selectedIndex:n,onSelect:r}){let{t:s}=t.useTranslation(`openhands`),c=(0,a.useRef)([]);return(0,a.useEffect)(()=>{c.current=c.current.slice(0,e.length)},[e.length]),(0,a.useEffect)(()=>{let e=c.current[n];e&&e.scrollIntoView({block:`nearest`})},[n]),e.length===0?null:(0,o.jsxs)(`div`,{role:`listbox`,"aria-label":s(`CHAT_INTERFACE$COMMANDS`),className:`absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50`,"data-testid":`slash-command-menu`,children:[(0,o.jsx)(`div`,{className:`px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]`,children:s(`CHAT_INTERFACE$COMMANDS`)}),(0,o.jsx)(`div`,{className:i.dropdownMenuListClassName,children:e.map((e,t)=>(0,o.jsx)(l,{item:e,isSelected:t===n,onSelect:r,ref:e=>{c.current[t]=e}},e.command))})]})}exports.SlashCommandMenu=u;
 //# sourceMappingURL=slash-command-menu.cjs.map

package/dist/components/features/chat/components/slash-command-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slash-command-menu.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/slash-command-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Text } from \"#/ui/typography\";\nimport { SlashCommandItem } from \"#/hooks/chat/use-slash-command\";\n\n/**\n * Strip common inline Markdown syntax so descriptions render as plain text.\n * Handles: bold, italic, inline code, links, and images.\n */\nexport function stripMarkdown(text: string): string {\n  return (\n    text\n      // Images: ![alt](url) → alt\n      .replace(/!\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Links: [text](url) → text\n      .replace(/\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Bold/italic: ***text***, **text**, *text*, ___text___, __text__, _text_\n      .replace(/\\*{3}(.+?)\\*{3}/g, \"$1\")\n      .replace(/\\*{2}(.+?)\\*{2}/g, \"$1\")\n      .replace(/\\*(.+?)\\*/g, \"$1\")\n      .replace(/_{3}(.+?)_{3}/g, \"$1\")\n      .replace(/_{2}(.+?)_{2}/g, \"$1\")\n      .replace(/_(.+?)_/g, \"$1\")\n      // Inline code: `text` → text\n      .replace(/`(.+?)`/g, \"$1\")\n      // Strikethrough: ~~text~~ → text\n      .replace(/~~(.+?)~~/g, \"$1\")\n  );\n}\n\n/**\n * Extract a short description from skill content.\n * Tries YAML frontmatter \"description:\" first, then falls back\n * to the first meaningful line after headers and frontmatter.\n * Returns plain text with Markdown formatting stripped.\n */\nexport function getSkillDescription(content: string): string | null {\n  let body = content;\n\n  // Try to extract description from YAML frontmatter\n  const frontmatterMatch = content.match(/^---\\s*\\n([\\s\\S]*?)\\n---/);\n  if (frontmatterMatch) {\n    const descMatch = frontmatterMatch[1].match(/^description:\\s*(.+)$/m);\n    if (descMatch) {\n      let desc = descMatch[1].trim();\n      // Strip surrounding quotes from YAML values\n      if (\n        (desc.startsWith('\"') && desc.endsWith('\"')) ||\n        (desc.startsWith(\"'\") && desc.endsWith(\"'\"))\n      ) {\n        desc = desc.slice(1, -1);\n      }\n      return stripMarkdown(desc);\n    }\n    // Skip frontmatter for body parsing\n    body = content.slice(frontmatterMatch[0].length);\n  }\n\n  // Fall back to first meaningful line (skip headers, empty lines, frontmatter delimiters)\n  const meaningful = body\n    .split(\"\\n\")\n    .map((line) => line.trim())\n    .find((line) => line.length > 0 && !line.startsWith(\"#\") && line !== \"---\");\n\n  if (!meaningful) return null;\n\n  // Strip Markdown first so URLs inside links don't confuse sentence detection\n  const stripped = stripMarkdown(meaningful);\n  const sentence = stripped.match(/^[^.!?\\n]*[.!?]/);\n  return sentence?.[0] || stripped;\n}\n\ninterface SlashCommandMenuItemProps {\n  item: SlashCommandItem;\n  isSelected: boolean;\n  onSelect: (item: SlashCommandItem) => void;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction SlashCommandMenuItem({\n  item,\n  isSelected,\n  onSelect,\n  ref,\n}: SlashCommandMenuItemProps) {\n  const description = useMemo(() => {\n    if (\"description\" in item.skill && item.skill.description) {\n      return stripMarkdown(item.skill.description);\n    }\n    if (\"content\" in item.skill && item.skill.content) {\n      return getSkillDescription(item.skill.content);\n    }\n    return null;\n  }, [item.skill]);\n\n  return (\n    <button\n      role=\"option\"\n      aria-selected={isSelected}\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"w-full px-3 py-2.5 text-left transition-colors\",\n        isSelected ? \"bg-tertiary\" : \"hover:bg-[var(--oh-surface-raised)]\",\n      )}\n      onMouseDown={(e) => {\n        // Use mouseDown instead of click to fire before input blur\n        e.preventDefault();\n        onSelect(item);\n      }}\n    >\n      <Text className=\"font-normal\">{item.command}</Text>\n      {description && (\n        <Text className=\"text-xs text-[var(--oh-muted)] mt-0.5 truncate block\">\n          {description}\n        </Text>\n      )}\n    </button>\n  );\n}\n\ninterface SlashCommandMenuProps {\n  items: SlashCommandItem[];\n  selectedIndex: number;\n  onSelect: (item: SlashCommandItem) => void;\n}\n\nexport function SlashCommandMenu({\n  items,\n  selectedIndex,\n  onSelect,\n}: SlashCommandMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Keep refs array in sync with items length\n  useEffect(() => {\n    itemRefs.current = itemRefs.current.slice(0, items.length);\n  }, [items.length]);\n\n  // Scroll selected item into view\n  useEffect(() => {\n    const selectedItem = itemRefs.current[selectedIndex];\n    if (selectedItem) {\n      selectedItem.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [selectedIndex]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={t(\"CHAT_INTERFACE$COMMANDS\")}\n      className=\"absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50\"\n      data-testid=\"slash-command-menu\"\n    >\n      <div className=\"px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]\">\n        {t(\"CHAT_INTERFACE$COMMANDS\")}\n      </div>\n      {items.map((item, index) => (\n        <SlashCommandMenuItem\n          key={item.command}\n          item={item}\n          isSelected={index === selectedIndex}\n          onSelect={onSelect}\n          ref={(el) => {\n            itemRefs.current[index] = el;\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"4SAUA,SAAgB,EAAc,EAAsB,CAClD,OACE,EAEG,QAAQ,0BAA2B,KAAK,CAExC,QAAQ,yBAA0B,KAAK,CAEvC,QAAQ,mBAAoB,KAAK,CACjC,QAAQ,mBAAoB,KAAK,CACjC,QAAQ,aAAc,KAAK,CAC3B,QAAQ,iBAAkB,KAAK,CAC/B,QAAQ,iBAAkB,KAAK,CAC/B,QAAQ,WAAY,KAAK,CAEzB,QAAQ,WAAY,KAAK,CAEzB,QAAQ,aAAc,KAAK,CAUlC,SAAgB,EAAoB,EAAgC,CAClE,IAAI,EAAO,EAGL,EAAmB,EAAQ,MAAM,2BAA2B,CAClE,GAAI,EAAkB,CACpB,IAAM,EAAY,EAAiB,GAAG,MAAM,yBAAyB,CACrE,GAAI,EAAW,CACb,IAAI,EAAO,EAAU,GAAG,MAAM,CAQ9B,OALG,EAAK,WAAW,IAAI,EAAI,EAAK,SAAS,IAAI,EAC1C,EAAK,WAAW,IAAI,EAAI,EAAK,SAAS,IAAI,IAE3C,EAAO,EAAK,MAAM,EAAG,GAAG,EAEnB,EAAc,EAAK,CAG5B,EAAO,EAAQ,MAAM,EAAiB,GAAG,OAAO,CAIlD,IAAM,EAAa,EAChB,MAAM;EAAK,CACX,IAAK,GAAS,EAAK,MAAM,CAAC,CAC1B,KAAM,GAAS,EAAK,OAAS,GAAK,CAAC,EAAK,WAAW,IAAI,EAAI,IAAS,MAAM,CAE7E,GAAI,CAAC,EAAY,OAAO,KAGxB,IAAM,EAAW,EAAc,EAAW,CAE1C,OADiB,EAAS,MAAM,kBACzB,GAAW,IAAM,EAU1B,SAAS,EAAqB,CAC5B,OACA,aACA,WACA,OAC4B,CAC5B,IAAM,GAAA,EAAA,EAAA,aACA,gBAAiB,EAAK,OAAS,EAAK,MAAM,YACrC,EAAc,EAAK,MAAM,YAAY,CAE1C,YAAa,EAAK,OAAS,EAAK,MAAM,QACjC,EAAoB,EAAK,MAAM,QAAQ,CAEzC,KACN,CAAC,EAAK,MAAM,CAAC,CAEhB,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,gBAAe,EACV,MACL,KAAK,SACL,UAAW,EAAA,GACT,iDACA,EAAa,cAAgB,sCAC9B,CACD,YAAc,GAAM,CAElB,EAAE,gBAAgB,CAClB,EAAS,EAAK,WAZlB,EAeE,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,uBAAe,EAAK,QAAe,CAAA,CAClD,IACC,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,gEACb,EACI,CAAA,CAEF,GAUb,SAAgB,EAAiB,CAC/B,QACA,gBACA,YACwB,CACxB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,GAAA,EAAA,EAAA,QAAgD,EAAE,CAAC,CAiBzD,OAdA,EAAA,EAAA,eAAgB,CACd,EAAS,QAAU,EAAS,QAAQ,MAAM,EAAG,EAAM,OAAO,EACzD,CAAC,EAAM,OAAO,CAAC,EAGlB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAe,EAAS,QAAQ,GAClC,GACF,EAAa,eAAe,CAAE,MAAO,UAAW,CAAC,EAElD,CAAC,EAAc,CAAC,CAEf,EAAM,SAAW,EAAU,MAG7B,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,UACL,aAAY,EAAE,0BAA0B,CACxC,UAAU,kLACV,cAAY,8BAJd,EAME,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8FACZ,EAAE,0BAA0B,CACzB,CAAA,CACL,EAAM,KAAK,EAAM,KAChB,EAAA,EAAA,KAAC,EAAD,CAEQ,OACN,WAAY,IAAU,EACZ,WACV,IAAM,GAAO,CACX,EAAS,QAAQ,GAAS,GAE5B,CAPK,EAAK,QAOV,CACF,CACE"}
+{"version":3,"file":"slash-command-menu.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/slash-command-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownInstantColorClassName,\n  dropdownMenuListClassName,\n} from \"#/utils/dropdown-classes\";\nimport { Text } from \"#/ui/typography\";\nimport { SlashCommandItem } from \"#/hooks/chat/use-slash-command\";\n\n/**\n * Strip common inline Markdown syntax so descriptions render as plain text.\n * Handles: bold, italic, inline code, links, and images.\n */\nexport function stripMarkdown(text: string): string {\n  return (\n    text\n      // Images: ![alt](url) → alt\n      .replace(/!\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Links: [text](url) → text\n      .replace(/\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Bold/italic: ***text***, **text**, *text*, ___text___, __text__, _text_\n      .replace(/\\*{3}(.+?)\\*{3}/g, \"$1\")\n      .replace(/\\*{2}(.+?)\\*{2}/g, \"$1\")\n      .replace(/\\*(.+?)\\*/g, \"$1\")\n      .replace(/_{3}(.+?)_{3}/g, \"$1\")\n      .replace(/_{2}(.+?)_{2}/g, \"$1\")\n      .replace(/_(.+?)_/g, \"$1\")\n      // Inline code: `text` → text\n      .replace(/`(.+?)`/g, \"$1\")\n      // Strikethrough: ~~text~~ → text\n      .replace(/~~(.+?)~~/g, \"$1\")\n  );\n}\n\n/**\n * Extract a short description from skill content.\n * Tries YAML frontmatter \"description:\" first, then falls back\n * to the first meaningful line after headers and frontmatter.\n * Returns plain text with Markdown formatting stripped.\n */\nexport function getSkillDescription(content: string): string | null {\n  let body = content;\n\n  // Try to extract description from YAML frontmatter\n  const frontmatterMatch = content.match(/^---\\s*\\n([\\s\\S]*?)\\n---/);\n  if (frontmatterMatch) {\n    const descMatch = frontmatterMatch[1].match(/^description:\\s*(.+)$/m);\n    if (descMatch) {\n      let desc = descMatch[1].trim();\n      // Strip surrounding quotes from YAML values\n      if (\n        (desc.startsWith('\"') && desc.endsWith('\"')) ||\n        (desc.startsWith(\"'\") && desc.endsWith(\"'\"))\n      ) {\n        desc = desc.slice(1, -1);\n      }\n      return stripMarkdown(desc);\n    }\n    // Skip frontmatter for body parsing\n    body = content.slice(frontmatterMatch[0].length);\n  }\n\n  // Fall back to first meaningful line (skip headers, empty lines, frontmatter delimiters)\n  const meaningful = body\n    .split(\"\\n\")\n    .map((line) => line.trim())\n    .find((line) => line.length > 0 && !line.startsWith(\"#\") && line !== \"---\");\n\n  if (!meaningful) return null;\n\n  // Strip Markdown first so URLs inside links don't confuse sentence detection\n  const stripped = stripMarkdown(meaningful);\n  const sentence = stripped.match(/^[^.!?\\n]*[.!?]/);\n  return sentence?.[0] || stripped;\n}\n\ninterface SlashCommandMenuItemProps {\n  item: SlashCommandItem;\n  isSelected: boolean;\n  onSelect: (item: SlashCommandItem) => void;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction SlashCommandMenuItem({\n  item,\n  isSelected,\n  onSelect,\n  ref,\n}: SlashCommandMenuItemProps) {\n  const description = useMemo(() => {\n    if (\"description\" in item.skill && item.skill.description) {\n      return stripMarkdown(item.skill.description);\n    }\n    if (\"content\" in item.skill && item.skill.content) {\n      return getSkillDescription(item.skill.content);\n    }\n    return null;\n  }, [item.skill]);\n\n  return (\n    <button\n      role=\"option\"\n      aria-selected={isSelected}\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"w-full px-3 py-2.5 text-left\",\n        dropdownInstantColorClassName,\n        isSelected ? \"bg-tertiary\" : \"hover:bg-[var(--oh-surface-raised)]\",\n      )}\n      onMouseDown={(e) => {\n        // Use mouseDown instead of click to fire before input blur\n        e.preventDefault();\n        onSelect(item);\n      }}\n    >\n      <Text className=\"font-normal\">{item.command}</Text>\n      {description && (\n        <Text className=\"text-xs text-[var(--oh-muted)] mt-0.5 truncate block\">\n          {description}\n        </Text>\n      )}\n    </button>\n  );\n}\n\ninterface SlashCommandMenuProps {\n  items: SlashCommandItem[];\n  selectedIndex: number;\n  onSelect: (item: SlashCommandItem) => void;\n}\n\nexport function SlashCommandMenu({\n  items,\n  selectedIndex,\n  onSelect,\n}: SlashCommandMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Keep refs array in sync with items length\n  useEffect(() => {\n    itemRefs.current = itemRefs.current.slice(0, items.length);\n  }, [items.length]);\n\n  // Scroll selected item into view\n  useEffect(() => {\n    const selectedItem = itemRefs.current[selectedIndex];\n    if (selectedItem) {\n      selectedItem.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [selectedIndex]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={t(\"CHAT_INTERFACE$COMMANDS\")}\n      className=\"absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50\"\n      data-testid=\"slash-command-menu\"\n    >\n      <div className=\"px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]\">\n        {t(\"CHAT_INTERFACE$COMMANDS\")}\n      </div>\n      <div className={dropdownMenuListClassName}>\n        {items.map((item, index) => (\n          <SlashCommandMenuItem\n            key={item.command}\n            item={item}\n            isSelected={index === selectedIndex}\n            onSelect={onSelect}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/slash-command-menu.js

@@ -1,73 +1,77 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { cn as t } from "../../../../utils/utils.js";
 import { Text as n } from "../../../../ui/typography.js";
-import { useEffect as r, useMemo as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { dropdownInstantColorClassName as r, dropdownMenuListClassName as i } from "../../../../utils/dropdown-classes.js";
+import { useEffect as a, useMemo as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/features/chat/components/slash-command-menu.tsx
-function c(e) {
+function u(e) {
 	return e.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_{3}(.+?)_{3}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/_(.+?)_/g, "$1").replace(/`(.+?)`/g, "$1").replace(/~~(.+?)~~/g, "$1");
 }
-function l(e) {
+function d(e) {
 	let t = e, n = e.match(/^---\s*\n([\s\S]*?)\n---/);
 	if (n) {
 		let r = n[1].match(/^description:\s*(.+)$/m);
 		if (r) {
 			let e = r[1].trim();
-			return (e.startsWith("\"") && e.endsWith("\"") || e.startsWith("'") && e.endsWith("'")) && (e = e.slice(1, -1)), c(e);
+			return (e.startsWith("\"") && e.endsWith("\"") || e.startsWith("'") && e.endsWith("'")) && (e = e.slice(1, -1)), u(e);
 		}
 		t = e.slice(n[0].length);
 	}
 	let r = t.split("\n").map((e) => e.trim()).find((e) => e.length > 0 && !e.startsWith("#") && e !== "---");
 	if (!r) return null;
-	let i = c(r);
+	let i = u(r);
 	return i.match(/^[^.!?\n]*[.!?]/)?.[0] || i;
 }
-function u({ item: e, isSelected: r, onSelect: a, ref: u }) {
-	let d = i(() => "description" in e.skill && e.skill.description ? c(e.skill.description) : "content" in e.skill && e.skill.content ? l(e.skill.content) : null, [e.skill]);
-	return /* @__PURE__ */ s("button", {
+function f({ item: e, isSelected: i, onSelect: a, ref: s }) {
+	let f = o(() => "description" in e.skill && e.skill.description ? u(e.skill.description) : "content" in e.skill && e.skill.content ? d(e.skill.content) : null, [e.skill]);
+	return /* @__PURE__ */ l("button", {
 		role: "option",
-		"aria-selected": r,
-		ref: u,
+		"aria-selected": i,
+		ref: s,
 		type: "button",
-		className: t("w-full px-3 py-2.5 text-left transition-colors", r ? "bg-tertiary" : "hover:bg-[var(--oh-surface-raised)]"),
+		className: t("w-full px-3 py-2.5 text-left", r, i ? "bg-tertiary" : "hover:bg-[var(--oh-surface-raised)]"),
 		onMouseDown: (t) => {
 			t.preventDefault(), a(e);
 		},
-		children: [/* @__PURE__ */ o(n, {
+		children: [/* @__PURE__ */ c(n, {
 			className: "font-normal",
 			children: e.command
-		}), d && /* @__PURE__ */ o(n, {
+		}), f && /* @__PURE__ */ c(n, {
 			className: "text-xs text-[var(--oh-muted)] mt-0.5 truncate block",
-			children: d
+			children: f
 		})]
 	});
 }
-function d({ items: t, selectedIndex: n, onSelect: i }) {
-	let { t: c } = e("openhands"), l = a([]);
-	return r(() => {
-		l.current = l.current.slice(0, t.length);
-	}, [t.length]), r(() => {
-		let e = l.current[n];
+function p({ items: t, selectedIndex: n, onSelect: r }) {
+	let { t: o } = e("openhands"), u = s([]);
+	return a(() => {
+		u.current = u.current.slice(0, t.length);
+	}, [t.length]), a(() => {
+		let e = u.current[n];
 		e && e.scrollIntoView({ block: "nearest" });
-	}, [n]), t.length === 0 ? null : /* @__PURE__ */ s("div", {
+	}, [n]), t.length === 0 ? null : /* @__PURE__ */ l("div", {
 		role: "listbox",
-		"aria-label": c("CHAT_INTERFACE$COMMANDS"),
+		"aria-label": o("CHAT_INTERFACE$COMMANDS"),
 		className: "absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50",
 		"data-testid": "slash-command-menu",
-		children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: "px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]",
-			children: c("CHAT_INTERFACE$COMMANDS")
-		}), t.map((e, t) => /* @__PURE__ */ o(u, {
-			item: e,
-			isSelected: t === n,
-			onSelect: i,
-			ref: (e) => {
-				l.current[t] = e;
-			}
-		}, e.command))]
+			children: o("CHAT_INTERFACE$COMMANDS")
+		}), /* @__PURE__ */ c("div", {
+			className: i,
+			children: t.map((e, t) => /* @__PURE__ */ c(f, {
+				item: e,
+				isSelected: t === n,
+				onSelect: r,
+				ref: (e) => {
+					u.current[t] = e;
+				}
+			}, e.command))
+		})]
 	});
 }
 //#endregion
-export { d as SlashCommandMenu };
+export { p as SlashCommandMenu };
 
 //# sourceMappingURL=slash-command-menu.js.map

package/dist/components/features/chat/components/slash-command-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"slash-command-menu.js","names":[],"sources":["../../../../../src/components/features/chat/components/slash-command-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Text } from \"#/ui/typography\";\nimport { SlashCommandItem } from \"#/hooks/chat/use-slash-command\";\n\n/**\n * Strip common inline Markdown syntax so descriptions render as plain text.\n * Handles: bold, italic, inline code, links, and images.\n */\nexport function stripMarkdown(text: string): string {\n  return (\n    text\n      // Images: ![alt](url) → alt\n      .replace(/!\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Links: [text](url) → text\n      .replace(/\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Bold/italic: ***text***, **text**, *text*, ___text___, __text__, _text_\n      .replace(/\\*{3}(.+?)\\*{3}/g, \"$1\")\n      .replace(/\\*{2}(.+?)\\*{2}/g, \"$1\")\n      .replace(/\\*(.+?)\\*/g, \"$1\")\n      .replace(/_{3}(.+?)_{3}/g, \"$1\")\n      .replace(/_{2}(.+?)_{2}/g, \"$1\")\n      .replace(/_(.+?)_/g, \"$1\")\n      // Inline code: `text` → text\n      .replace(/`(.+?)`/g, \"$1\")\n      // Strikethrough: ~~text~~ → text\n      .replace(/~~(.+?)~~/g, \"$1\")\n  );\n}\n\n/**\n * Extract a short description from skill content.\n * Tries YAML frontmatter \"description:\" first, then falls back\n * to the first meaningful line after headers and frontmatter.\n * Returns plain text with Markdown formatting stripped.\n */\nexport function getSkillDescription(content: string): string | null {\n  let body = content;\n\n  // Try to extract description from YAML frontmatter\n  const frontmatterMatch = content.match(/^---\\s*\\n([\\s\\S]*?)\\n---/);\n  if (frontmatterMatch) {\n    const descMatch = frontmatterMatch[1].match(/^description:\\s*(.+)$/m);\n    if (descMatch) {\n      let desc = descMatch[1].trim();\n      // Strip surrounding quotes from YAML values\n      if (\n        (desc.startsWith('\"') && desc.endsWith('\"')) ||\n        (desc.startsWith(\"'\") && desc.endsWith(\"'\"))\n      ) {\n        desc = desc.slice(1, -1);\n      }\n      return stripMarkdown(desc);\n    }\n    // Skip frontmatter for body parsing\n    body = content.slice(frontmatterMatch[0].length);\n  }\n\n  // Fall back to first meaningful line (skip headers, empty lines, frontmatter delimiters)\n  const meaningful = body\n    .split(\"\\n\")\n    .map((line) => line.trim())\n    .find((line) => line.length > 0 && !line.startsWith(\"#\") && line !== \"---\");\n\n  if (!meaningful) return null;\n\n  // Strip Markdown first so URLs inside links don't confuse sentence detection\n  const stripped = stripMarkdown(meaningful);\n  const sentence = stripped.match(/^[^.!?\\n]*[.!?]/);\n  return sentence?.[0] || stripped;\n}\n\ninterface SlashCommandMenuItemProps {\n  item: SlashCommandItem;\n  isSelected: boolean;\n  onSelect: (item: SlashCommandItem) => void;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction SlashCommandMenuItem({\n  item,\n  isSelected,\n  onSelect,\n  ref,\n}: SlashCommandMenuItemProps) {\n  const description = useMemo(() => {\n    if (\"description\" in item.skill && item.skill.description) {\n      return stripMarkdown(item.skill.description);\n    }\n    if (\"content\" in item.skill && item.skill.content) {\n      return getSkillDescription(item.skill.content);\n    }\n    return null;\n  }, [item.skill]);\n\n  return (\n    <button\n      role=\"option\"\n      aria-selected={isSelected}\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"w-full px-3 py-2.5 text-left transition-colors\",\n        isSelected ? \"bg-tertiary\" : \"hover:bg-[var(--oh-surface-raised)]\",\n      )}\n      onMouseDown={(e) => {\n        // Use mouseDown instead of click to fire before input blur\n        e.preventDefault();\n        onSelect(item);\n      }}\n    >\n      <Text className=\"font-normal\">{item.command}</Text>\n      {description && (\n        <Text className=\"text-xs text-[var(--oh-muted)] mt-0.5 truncate block\">\n          {description}\n        </Text>\n      )}\n    </button>\n  );\n}\n\ninterface SlashCommandMenuProps {\n  items: SlashCommandItem[];\n  selectedIndex: number;\n  onSelect: (item: SlashCommandItem) => void;\n}\n\nexport function SlashCommandMenu({\n  items,\n  selectedIndex,\n  onSelect,\n}: SlashCommandMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Keep refs array in sync with items length\n  useEffect(() => {\n    itemRefs.current = itemRefs.current.slice(0, items.length);\n  }, [items.length]);\n\n  // Scroll selected item into view\n  useEffect(() => {\n    const selectedItem = itemRefs.current[selectedIndex];\n    if (selectedItem) {\n      selectedItem.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [selectedIndex]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={t(\"CHAT_INTERFACE$COMMANDS\")}\n      className=\"absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50\"\n      data-testid=\"slash-command-menu\"\n    >\n      <div className=\"px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]\">\n        {t(\"CHAT_INTERFACE$COMMANDS\")}\n      </div>\n      {items.map((item, index) => (\n        <SlashCommandMenuItem\n          key={item.command}\n          item={item}\n          isSelected={index === selectedIndex}\n          onSelect={onSelect}\n          ref={(el) => {\n            itemRefs.current[index] = el;\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,EAAc,GAAsB;AAClD,QACE,EAEG,QAAQ,2BAA2B,KAAK,CAExC,QAAQ,0BAA0B,KAAK,CAEvC,QAAQ,oBAAoB,KAAK,CACjC,QAAQ,oBAAoB,KAAK,CACjC,QAAQ,cAAc,KAAK,CAC3B,QAAQ,kBAAkB,KAAK,CAC/B,QAAQ,kBAAkB,KAAK,CAC/B,QAAQ,YAAY,KAAK,CAEzB,QAAQ,YAAY,KAAK,CAEzB,QAAQ,cAAc,KAAK;;AAUlC,SAAgB,EAAoB,GAAgC;CAClE,IAAI,IAAO,GAGL,IAAmB,EAAQ,MAAM,2BAA2B;AAClE,KAAI,GAAkB;EACpB,IAAM,IAAY,EAAiB,GAAG,MAAM,yBAAyB;AACrE,MAAI,GAAW;GACb,IAAI,IAAO,EAAU,GAAG,MAAM;AAQ9B,WALG,EAAK,WAAW,KAAI,IAAI,EAAK,SAAS,KAAI,IAC1C,EAAK,WAAW,IAAI,IAAI,EAAK,SAAS,IAAI,MAE3C,IAAO,EAAK,MAAM,GAAG,GAAG,GAEnB,EAAc,EAAK;;AAG5B,MAAO,EAAQ,MAAM,EAAiB,GAAG,OAAO;;CAIlD,IAAM,IAAa,EAChB,MAAM,KAAK,CACX,KAAK,MAAS,EAAK,MAAM,CAAC,CAC1B,MAAM,MAAS,EAAK,SAAS,KAAK,CAAC,EAAK,WAAW,IAAI,IAAI,MAAS,MAAM;AAE7E,KAAI,CAAC,EAAY,QAAO;CAGxB,IAAM,IAAW,EAAc,EAAW;AAE1C,QADiB,EAAS,MAAM,kBACzB,GAAW,MAAM;;AAU1B,SAAS,EAAqB,EAC5B,SACA,eACA,aACA,UAC4B;CAC5B,IAAM,IAAc,QACd,iBAAiB,EAAK,SAAS,EAAK,MAAM,cACrC,EAAc,EAAK,MAAM,YAAY,GAE1C,aAAa,EAAK,SAAS,EAAK,MAAM,UACjC,EAAoB,EAAK,MAAM,QAAQ,GAEzC,MACN,CAAC,EAAK,MAAM,CAAC;AAEhB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,iBAAe;EACV;EACL,MAAK;EACL,WAAW,EACT,kDACA,IAAa,gBAAgB,sCAC9B;EACD,cAAc,MAAM;AAGlB,GADA,EAAE,gBAAgB,EAClB,EAAS,EAAK;;YAZlB,CAeE,kBAAC,GAAD;GAAM,WAAU;aAAe,EAAK;GAAe,CAAA,EAClD,KACC,kBAAC,GAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEF;;;AAUb,SAAgB,EAAiB,EAC/B,UACA,kBACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAW,EAAqC,EAAE,CAAC;AAiBzD,QAdA,QAAgB;AACd,IAAS,UAAU,EAAS,QAAQ,MAAM,GAAG,EAAM,OAAO;IACzD,CAAC,EAAM,OAAO,CAAC,EAGlB,QAAgB;EACd,IAAM,IAAe,EAAS,QAAQ;AACtC,EAAI,KACF,EAAa,eAAe,EAAE,OAAO,WAAW,CAAC;IAElD,CAAC,EAAc,CAAC,EAEf,EAAM,WAAW,IAAU,OAG7B,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,EAAE,0BAA0B;EACxC,WAAU;EACV,eAAY;YAJd,CAME,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,0BAA0B;GACzB,CAAA,EACL,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;GAEQ;GACN,YAAY,MAAU;GACZ;GACV,MAAM,MAAO;AACX,MAAS,QAAQ,KAAS;;GAE5B,EAPK,EAAK,QAOV,CACF,CACE"}
+{"version":3,"file":"slash-command-menu.js","names":[],"sources":["../../../../../src/components/features/chat/components/slash-command-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownInstantColorClassName,\n  dropdownMenuListClassName,\n} from \"#/utils/dropdown-classes\";\nimport { Text } from \"#/ui/typography\";\nimport { SlashCommandItem } from \"#/hooks/chat/use-slash-command\";\n\n/**\n * Strip common inline Markdown syntax so descriptions render as plain text.\n * Handles: bold, italic, inline code, links, and images.\n */\nexport function stripMarkdown(text: string): string {\n  return (\n    text\n      // Images: ![alt](url) → alt\n      .replace(/!\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Links: [text](url) → text\n      .replace(/\\[([^\\]]*)\\]\\([^)]*\\)/g, \"$1\")\n      // Bold/italic: ***text***, **text**, *text*, ___text___, __text__, _text_\n      .replace(/\\*{3}(.+?)\\*{3}/g, \"$1\")\n      .replace(/\\*{2}(.+?)\\*{2}/g, \"$1\")\n      .replace(/\\*(.+?)\\*/g, \"$1\")\n      .replace(/_{3}(.+?)_{3}/g, \"$1\")\n      .replace(/_{2}(.+?)_{2}/g, \"$1\")\n      .replace(/_(.+?)_/g, \"$1\")\n      // Inline code: `text` → text\n      .replace(/`(.+?)`/g, \"$1\")\n      // Strikethrough: ~~text~~ → text\n      .replace(/~~(.+?)~~/g, \"$1\")\n  );\n}\n\n/**\n * Extract a short description from skill content.\n * Tries YAML frontmatter \"description:\" first, then falls back\n * to the first meaningful line after headers and frontmatter.\n * Returns plain text with Markdown formatting stripped.\n */\nexport function getSkillDescription(content: string): string | null {\n  let body = content;\n\n  // Try to extract description from YAML frontmatter\n  const frontmatterMatch = content.match(/^---\\s*\\n([\\s\\S]*?)\\n---/);\n  if (frontmatterMatch) {\n    const descMatch = frontmatterMatch[1].match(/^description:\\s*(.+)$/m);\n    if (descMatch) {\n      let desc = descMatch[1].trim();\n      // Strip surrounding quotes from YAML values\n      if (\n        (desc.startsWith('\"') && desc.endsWith('\"')) ||\n        (desc.startsWith(\"'\") && desc.endsWith(\"'\"))\n      ) {\n        desc = desc.slice(1, -1);\n      }\n      return stripMarkdown(desc);\n    }\n    // Skip frontmatter for body parsing\n    body = content.slice(frontmatterMatch[0].length);\n  }\n\n  // Fall back to first meaningful line (skip headers, empty lines, frontmatter delimiters)\n  const meaningful = body\n    .split(\"\\n\")\n    .map((line) => line.trim())\n    .find((line) => line.length > 0 && !line.startsWith(\"#\") && line !== \"---\");\n\n  if (!meaningful) return null;\n\n  // Strip Markdown first so URLs inside links don't confuse sentence detection\n  const stripped = stripMarkdown(meaningful);\n  const sentence = stripped.match(/^[^.!?\\n]*[.!?]/);\n  return sentence?.[0] || stripped;\n}\n\ninterface SlashCommandMenuItemProps {\n  item: SlashCommandItem;\n  isSelected: boolean;\n  onSelect: (item: SlashCommandItem) => void;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction SlashCommandMenuItem({\n  item,\n  isSelected,\n  onSelect,\n  ref,\n}: SlashCommandMenuItemProps) {\n  const description = useMemo(() => {\n    if (\"description\" in item.skill && item.skill.description) {\n      return stripMarkdown(item.skill.description);\n    }\n    if (\"content\" in item.skill && item.skill.content) {\n      return getSkillDescription(item.skill.content);\n    }\n    return null;\n  }, [item.skill]);\n\n  return (\n    <button\n      role=\"option\"\n      aria-selected={isSelected}\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"w-full px-3 py-2.5 text-left\",\n        dropdownInstantColorClassName,\n        isSelected ? \"bg-tertiary\" : \"hover:bg-[var(--oh-surface-raised)]\",\n      )}\n      onMouseDown={(e) => {\n        // Use mouseDown instead of click to fire before input blur\n        e.preventDefault();\n        onSelect(item);\n      }}\n    >\n      <Text className=\"font-normal\">{item.command}</Text>\n      {description && (\n        <Text className=\"text-xs text-[var(--oh-muted)] mt-0.5 truncate block\">\n          {description}\n        </Text>\n      )}\n    </button>\n  );\n}\n\ninterface SlashCommandMenuProps {\n  items: SlashCommandItem[];\n  selectedIndex: number;\n  onSelect: (item: SlashCommandItem) => void;\n}\n\nexport function SlashCommandMenu({\n  items,\n  selectedIndex,\n  onSelect,\n}: SlashCommandMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Keep refs array in sync with items length\n  useEffect(() => {\n    itemRefs.current = itemRefs.current.slice(0, items.length);\n  }, [items.length]);\n\n  // Scroll selected item into view\n  useEffect(() => {\n    const selectedItem = itemRefs.current[selectedIndex];\n    if (selectedItem) {\n      selectedItem.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [selectedIndex]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={t(\"CHAT_INTERFACE$COMMANDS\")}\n      className=\"absolute bottom-full left-0 w-full mb-1 bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)] rounded-lg shadow-lg max-h-[300px] overflow-y-auto custom-scrollbar z-50\"\n      data-testid=\"slash-command-menu\"\n    >\n      <div className=\"px-3 py-2 text-xs text-[var(--oh-muted)] border-b border-[var(--oh-border-subtle)]\">\n        {t(\"CHAT_INTERFACE$COMMANDS\")}\n      </div>\n      <div className={dropdownMenuListClassName}>\n        {items.map((item, index) => (\n          <SlashCommandMenuItem\n            key={item.command}\n            item={item}\n            isSelected={index === selectedIndex}\n            onSelect={onSelect}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,EAAc,GAAsB;AAClD,QACE,EAEG,QAAQ,2BAA2B,KAAK,CAExC,QAAQ,0BAA0B,KAAK,CAEvC,QAAQ,oBAAoB,KAAK,CACjC,QAAQ,oBAAoB,KAAK,CACjC,QAAQ,cAAc,KAAK,CAC3B,QAAQ,kBAAkB,KAAK,CAC/B,QAAQ,kBAAkB,KAAK,CAC/B,QAAQ,YAAY,KAAK,CAEzB,QAAQ,YAAY,KAAK,CAEzB,QAAQ,cAAc,KAAK;;AAUlC,SAAgB,EAAoB,GAAgC;CAClE,IAAI,IAAO,GAGL,IAAmB,EAAQ,MAAM,2BAA2B;AAClE,KAAI,GAAkB;EACpB,IAAM,IAAY,EAAiB,GAAG,MAAM,yBAAyB;AACrE,MAAI,GAAW;GACb,IAAI,IAAO,EAAU,GAAG,MAAM;AAQ9B,WALG,EAAK,WAAW,KAAI,IAAI,EAAK,SAAS,KAAI,IAC1C,EAAK,WAAW,IAAI,IAAI,EAAK,SAAS,IAAI,MAE3C,IAAO,EAAK,MAAM,GAAG,GAAG,GAEnB,EAAc,EAAK;;AAG5B,MAAO,EAAQ,MAAM,EAAiB,GAAG,OAAO;;CAIlD,IAAM,IAAa,EAChB,MAAM,KAAK,CACX,KAAK,MAAS,EAAK,MAAM,CAAC,CAC1B,MAAM,MAAS,EAAK,SAAS,KAAK,CAAC,EAAK,WAAW,IAAI,IAAI,MAAS,MAAM;AAE7E,KAAI,CAAC,EAAY,QAAO;CAGxB,IAAM,IAAW,EAAc,EAAW;AAE1C,QADiB,EAAS,MAAM,kBACzB,GAAW,MAAM;;AAU1B,SAAS,EAAqB,EAC5B,SACA,eACA,aACA,UAC4B;CAC5B,IAAM,IAAc,QACd,iBAAiB,EAAK,SAAS,EAAK,MAAM,cACrC,EAAc,EAAK,MAAM,YAAY,GAE1C,aAAa,EAAK,SAAS,EAAK,MAAM,UACjC,EAAoB,EAAK,MAAM,QAAQ,GAEzC,MACN,CAAC,EAAK,MAAM,CAAC;AAEhB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,iBAAe;EACV;EACL,MAAK;EACL,WAAW,EACT,gCACA,GACA,IAAa,gBAAgB,sCAC9B;EACD,cAAc,MAAM;AAGlB,GADA,EAAE,gBAAgB,EAClB,EAAS,EAAK;;YAblB,CAgBE,kBAAC,GAAD;GAAM,WAAU;aAAe,EAAK;GAAe,CAAA,EAClD,KACC,kBAAC,GAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEF;;;AAUb,SAAgB,EAAiB,EAC/B,UACA,kBACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAW,EAAqC,EAAE,CAAC;AAiBzD,QAdA,QAAgB;AACd,IAAS,UAAU,EAAS,QAAQ,MAAM,GAAG,EAAM,OAAO;IACzD,CAAC,EAAM,OAAO,CAAC,EAGlB,QAAgB;EACd,IAAM,IAAe,EAAS,QAAQ;AACtC,EAAI,KACF,EAAa,eAAe,EAAE,OAAO,WAAW,CAAC;IAElD,CAAC,EAAc,CAAC,EAEf,EAAM,WAAW,IAAU,OAG7B,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,EAAE,0BAA0B;EACxC,WAAU;EACV,eAAY;YAJd,CAME,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,0BAA0B;GACzB,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW;aACb,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;IAEQ;IACN,YAAY,MAAU;IACZ;IACV,MAAM,MAAO;AACX,OAAS,QAAQ,KAAS;;IAE5B,EAPK,EAAK,QAOV,CACF;GACE,CAAA,CACF"}

package/dist/components/features/chat/git-control-bar-pr-button.cjs

@@ -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(`../../../utils/utils.cjs`),r=require(`../../../hooks/use-tracking.cjs`),i=require(`../../../icons/u-pr.cjs`);let a=require(`react/jsx-runtime`);function o({onSuggestionsClick:o,hasRepository:s,providerTokensReady:c,currentGitProvider:l,isConversationReady:u=!0}){let{t:d}=e.useTranslation(`openhands`),{trackCreatePrButtonClick:f}=r.useTracking(),p=c&&s&&u;return(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{f(),o(n.getCreatePRPrompt(l))},disabled:!p,className:n.cn(`flex flex-row gap-1 items-center justify-center px-2 py-1 rounded-[100px] w-[126px] min-w-[126px] h-7`,p?`bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer`:`bg-[rgba(71,74,84,0.50)] cursor-not-allowed`),children:[(0,a.jsx)(`div`,{className:`w-3 h-3 flex items-center justify-center`,children:(0,a.jsx)(i.default,{width:12,height:12,color:`white`})}),(0,a.jsx)(`div`,{className:`font-normal text-white text-sm leading-5 max-w-[126px] truncate`,title:d(t.I18nKey.COMMON$PULL_REQUEST),children:d(t.I18nKey.COMMON$PULL_REQUEST)})]})}exports.GitControlBarPrButton=o;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../hooks/use-tracking.cjs`),i=require(`../../../icons/u-pr.cjs`),a=require(`../../../utils/git-control-bar-classes.cjs`);let o=require(`react/jsx-runtime`);function s({onSuggestionsClick:s,hasRepository:c,providerTokensReady:l,currentGitProvider:u,isConversationReady:d=!0}){let{t:f}=e.useTranslation(`openhands`),{trackCreatePrButtonClick:p}=r.useTracking(),m=l&&c&&d;return(0,o.jsxs)(`button`,{type:`button`,onClick:()=>{p(),s(n.getCreatePRPrompt(u))},disabled:!m,className:n.cn(a.gitControlBarActionButtonClassName(m),`px-2 py-1 w-[126px] min-w-[126px] h-7`),children:[(0,o.jsx)(`div`,{className:`w-3 h-3 flex items-center justify-center`,children:(0,o.jsx)(i.default,{width:12,height:12,color:a.gitControlBarActionIconColor(m)})}),(0,o.jsx)(`div`,{className:n.cn(a.gitControlBarActionLabelClassName,`max-w-[126px]`),title:f(t.I18nKey.COMMON$PULL_REQUEST),children:f(t.I18nKey.COMMON$PULL_REQUEST)})]})}exports.GitControlBarPrButton=s;
 //# sourceMappingURL=git-control-bar-pr-button.cjs.map

package/dist/components/features/chat/git-control-bar-pr-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"git-control-bar-pr-button.cjs","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pr-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport PRIcon from \"#/icons/u-pr.svg?react\";\nimport { cn, getCreatePRPrompt } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Provider } from \"#/types/settings\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPrButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  currentGitProvider: Provider;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPrButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  currentGitProvider,\n  isConversationReady = true,\n}: GitControlBarPrButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackCreatePrButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePrClick = () => {\n    trackCreatePrButtonClick();\n    onSuggestionsClick(getCreatePRPrompt(currentGitProvider));\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePrClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        \"flex flex-row gap-1 items-center justify-center px-2 py-1 rounded-[100px] w-[126px] min-w-[126px] h-7\",\n        isButtonEnabled\n          ? \"bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer\"\n          : \"bg-[rgba(71,74,84,0.50)] cursor-not-allowed\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <PRIcon width={12} height={12} color=\"white\" />\n      </div>\n      <div\n        className=\"font-normal text-white text-sm leading-5 max-w-[126px] truncate\"\n        title={t(I18nKey.COMMON$PULL_REQUEST)}\n      >\n        {t(I18nKey.COMMON$PULL_REQUEST)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":"2UAeA,SAAgB,EAAsB,CACpC,qBACA,gBACA,sBACA,qBACA,sBAAsB,IACO,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,4BAA6B,EAAA,aAAa,CAE5C,EACJ,GAAuB,GAAiB,EAO1C,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YARwB,CAC1B,GAA0B,CAC1B,EAAmB,EAAA,kBAAkB,EAAmB,CAAC,EAOvD,SAAU,CAAC,EACX,UAAW,EAAA,GACT,wGACA,EACI,0DACA,8CACL,UATH,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACb,EAAA,EAAA,KAAC,EAAA,QAAD,CAAQ,MAAO,GAAI,OAAQ,GAAI,MAAM,QAAU,CAAA,CAC3C,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,kEACV,MAAO,EAAE,EAAA,QAAQ,oBAAoB,UAEpC,EAAE,EAAA,QAAQ,oBAAoB,CAC3B,CAAA,CACC"}
+{"version":3,"file":"git-control-bar-pr-button.cjs","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pr-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport PRIcon from \"#/icons/u-pr.svg?react\";\nimport { cn, getCreatePRPrompt } from \"#/utils/utils\";\nimport {\n  gitControlBarActionButtonClassName,\n  gitControlBarActionIconColor,\n  gitControlBarActionLabelClassName,\n} from \"#/utils/git-control-bar-classes\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Provider } from \"#/types/settings\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPrButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  currentGitProvider: Provider;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPrButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  currentGitProvider,\n  isConversationReady = true,\n}: GitControlBarPrButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackCreatePrButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePrClick = () => {\n    trackCreatePrButtonClick();\n    onSuggestionsClick(getCreatePRPrompt(currentGitProvider));\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePrClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        gitControlBarActionButtonClassName(isButtonEnabled),\n        \"px-2 py-1 w-[126px] min-w-[126px] h-7\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <PRIcon\n          width={12}\n          height={12}\n          color={gitControlBarActionIconColor(isButtonEnabled)}\n        />\n      </div>\n      <div\n        className={cn(gitControlBarActionLabelClassName, \"max-w-[126px]\")}\n        title={t(I18nKey.COMMON$PULL_REQUEST)}\n      >\n        {t(I18nKey.COMMON$PULL_REQUEST)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":"mYAoBA,SAAgB,EAAsB,CACpC,qBACA,gBACA,sBACA,qBACA,sBAAsB,IACO,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,4BAA6B,EAAA,aAAa,CAE5C,EACJ,GAAuB,GAAiB,EAO1C,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YARwB,CAC1B,GAA0B,CAC1B,EAAmB,EAAA,kBAAkB,EAAmB,CAAC,EAOvD,SAAU,CAAC,EACX,UAAW,EAAA,GACT,EAAA,mCAAmC,EAAgB,CACnD,wCACD,UAPH,EASE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACb,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,6BAA6B,EAAgB,CACpD,CAAA,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GAAG,EAAA,kCAAmC,gBAAgB,CACjE,MAAO,EAAE,EAAA,QAAQ,oBAAoB,UAEpC,EAAE,EAAA,QAAQ,oBAAoB,CAC3B,CAAA,CACC"}

package/dist/components/features/chat/git-control-bar-pr-button.js

@@ -3,32 +3,33 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n, getCreatePRPrompt as r } from "../../../utils/utils.js";
 import { useTracking as i } from "../../../hooks/use-tracking.js";
 import a from "../../../icons/u-pr.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { gitControlBarActionButtonClassName as o, gitControlBarActionIconColor as s, gitControlBarActionLabelClassName as c } from "../../../utils/git-control-bar-classes.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/chat/git-control-bar-pr-button.tsx
-function c({ onSuggestionsClick: c, hasRepository: l, providerTokensReady: u, currentGitProvider: d, isConversationReady: f = !0 }) {
-	let { t: p } = e("openhands"), { trackCreatePrButtonClick: m } = i(), h = u && l && f;
-	return /* @__PURE__ */ s("button", {
+function d({ onSuggestionsClick: d, hasRepository: f, providerTokensReady: p, currentGitProvider: m, isConversationReady: h = !0 }) {
+	let { t: g } = e("openhands"), { trackCreatePrButtonClick: _ } = i(), v = p && f && h;
+	return /* @__PURE__ */ u("button", {
 		type: "button",
 		onClick: () => {
-			m(), c(r(d));
+			_(), d(r(m));
 		},
-		disabled: !h,
-		className: n("flex flex-row gap-1 items-center justify-center px-2 py-1 rounded-[100px] w-[126px] min-w-[126px] h-7", h ? "bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer" : "bg-[rgba(71,74,84,0.50)] cursor-not-allowed"),
-		children: [/* @__PURE__ */ o("div", {
+		disabled: !v,
+		className: n(o(v), "px-2 py-1 w-[126px] min-w-[126px] h-7"),
+		children: [/* @__PURE__ */ l("div", {
 			className: "w-3 h-3 flex items-center justify-center",
-			children: /* @__PURE__ */ o(a, {
+			children: /* @__PURE__ */ l(a, {
 				width: 12,
 				height: 12,
-				color: "white"
+				color: s(v)
 			})
-		}), /* @__PURE__ */ o("div", {
-			className: "font-normal text-white text-sm leading-5 max-w-[126px] truncate",
-			title: p(t.COMMON$PULL_REQUEST),
-			children: p(t.COMMON$PULL_REQUEST)
+		}), /* @__PURE__ */ l("div", {
+			className: n(c, "max-w-[126px]"),
+			title: g(t.COMMON$PULL_REQUEST),
+			children: g(t.COMMON$PULL_REQUEST)
 		})]
 	});
 }
 //#endregion
-export { c as GitControlBarPrButton };
+export { d as GitControlBarPrButton };
 
 //# sourceMappingURL=git-control-bar-pr-button.js.map

package/dist/components/features/chat/git-control-bar-pr-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"git-control-bar-pr-button.js","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pr-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport PRIcon from \"#/icons/u-pr.svg?react\";\nimport { cn, getCreatePRPrompt } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Provider } from \"#/types/settings\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPrButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  currentGitProvider: Provider;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPrButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  currentGitProvider,\n  isConversationReady = true,\n}: GitControlBarPrButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackCreatePrButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePrClick = () => {\n    trackCreatePrButtonClick();\n    onSuggestionsClick(getCreatePRPrompt(currentGitProvider));\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePrClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        \"flex flex-row gap-1 items-center justify-center px-2 py-1 rounded-[100px] w-[126px] min-w-[126px] h-7\",\n        isButtonEnabled\n          ? \"bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer\"\n          : \"bg-[rgba(71,74,84,0.50)] cursor-not-allowed\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <PRIcon width={12} height={12} color=\"white\" />\n      </div>\n      <div\n        className=\"font-normal text-white text-sm leading-5 max-w-[126px] truncate\"\n        title={t(I18nKey.COMMON$PULL_REQUEST)}\n      >\n        {t(I18nKey.COMMON$PULL_REQUEST)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAsB,EACpC,uBACA,kBACA,wBACA,uBACA,yBAAsB,MACO;CAC7B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,gCAA6B,GAAa,EAE5C,IACJ,KAAuB,KAAiB;AAO1C,QACE,kBAAC,UAAD;EACE,MAAK;EACL,eARwB;AAE1B,GADA,GAA0B,EAC1B,EAAmB,EAAkB,EAAmB,CAAC;;EAOvD,UAAU,CAAC;EACX,WAAW,EACT,yGACA,IACI,4DACA,8CACL;YATH,CAWE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IAAQ,OAAO;IAAI,QAAQ;IAAI,OAAM;IAAU,CAAA;GAC3C,CAAA,EACN,kBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,EAAQ,oBAAoB;aAEpC,EAAE,EAAQ,oBAAoB;GAC3B,CAAA,CACC"}
+{"version":3,"file":"git-control-bar-pr-button.js","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pr-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport PRIcon from \"#/icons/u-pr.svg?react\";\nimport { cn, getCreatePRPrompt } from \"#/utils/utils\";\nimport {\n  gitControlBarActionButtonClassName,\n  gitControlBarActionIconColor,\n  gitControlBarActionLabelClassName,\n} from \"#/utils/git-control-bar-classes\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Provider } from \"#/types/settings\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPrButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  currentGitProvider: Provider;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPrButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  currentGitProvider,\n  isConversationReady = true,\n}: GitControlBarPrButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackCreatePrButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePrClick = () => {\n    trackCreatePrButtonClick();\n    onSuggestionsClick(getCreatePRPrompt(currentGitProvider));\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePrClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        gitControlBarActionButtonClassName(isButtonEnabled),\n        \"px-2 py-1 w-[126px] min-w-[126px] h-7\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <PRIcon\n          width={12}\n          height={12}\n          color={gitControlBarActionIconColor(isButtonEnabled)}\n        />\n      </div>\n      <div\n        className={cn(gitControlBarActionLabelClassName, \"max-w-[126px]\")}\n        title={t(I18nKey.COMMON$PULL_REQUEST)}\n      >\n        {t(I18nKey.COMMON$PULL_REQUEST)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAsB,EACpC,uBACA,kBACA,wBACA,uBACA,yBAAsB,MACO;CAC7B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,gCAA6B,GAAa,EAE5C,IACJ,KAAuB,KAAiB;AAO1C,QACE,kBAAC,UAAD;EACE,MAAK;EACL,eARwB;AAE1B,GADA,GAA0B,EAC1B,EAAmB,EAAkB,EAAmB,CAAC;;EAOvD,UAAU,CAAC;EACX,WAAW,EACT,EAAmC,EAAgB,EACnD,wCACD;YAPH,CASE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,OAAO,EAA6B,EAAgB;IACpD,CAAA;GACE,CAAA,EACN,kBAAC,OAAD;GACE,WAAW,EAAG,GAAmC,gBAAgB;GACjE,OAAO,EAAE,EAAQ,oBAAoB;aAEpC,EAAE,EAAQ,oBAAoB;GAC3B,CAAA,CACC"}

package/dist/components/features/chat/git-control-bar-pull-button.cjs

@@ -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(`../../../utils/utils.cjs`),r=require(`../../../hooks/use-tracking.cjs`),i=require(`../../../icons/u-arrow-down.cjs`);let a=require(`react/jsx-runtime`);function o({onSuggestionsClick:o,hasRepository:s,providerTokensReady:c,isConversationReady:l=!0}){let{t:u}=e.useTranslation(`openhands`),{trackPullButtonClick:d}=r.useTracking(),f=c&&s&&l;return(0,a.jsxs)(`button`,{type:`button`,onClick:()=>{d(),o(n.getGitPullPrompt())},disabled:!f,className:n.cn(`flex flex-row gap-1 items-center justify-center px-0.5 py-1 rounded-[100px] w-[76px] min-w-[76px]`,f?`bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer`:`bg-[rgba(71,74,84,0.50)] cursor-not-allowed`),children:[(0,a.jsx)(`div`,{className:`w-3 h-3 flex items-center justify-center`,children:(0,a.jsx)(i.default,{width:12,height:12,color:`white`})}),(0,a.jsx)(`div`,{className:`font-normal text-white text-sm leading-5 max-w-[76px] truncate`,title:u(t.I18nKey.COMMON$PULL),children:u(t.I18nKey.COMMON$PULL)})]})}exports.GitControlBarPullButton=o;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../hooks/use-tracking.cjs`),i=require(`../../../icons/u-arrow-down.cjs`),a=require(`../../../utils/git-control-bar-classes.cjs`);let o=require(`react/jsx-runtime`);function s({onSuggestionsClick:s,hasRepository:c,providerTokensReady:l,isConversationReady:u=!0}){let{t:d}=e.useTranslation(`openhands`),{trackPullButtonClick:f}=r.useTracking(),p=l&&c&&u;return(0,o.jsxs)(`button`,{type:`button`,onClick:()=>{f(),s(n.getGitPullPrompt())},disabled:!p,className:n.cn(a.gitControlBarActionButtonClassName(p),`px-0.5 py-1 w-[76px] min-w-[76px]`),children:[(0,o.jsx)(`div`,{className:`w-3 h-3 flex items-center justify-center`,children:(0,o.jsx)(i.default,{width:12,height:12,color:a.gitControlBarActionIconColor(p)})}),(0,o.jsx)(`div`,{className:n.cn(a.gitControlBarActionLabelClassName,`max-w-[76px]`),title:d(t.I18nKey.COMMON$PULL),children:d(t.I18nKey.COMMON$PULL)})]})}exports.GitControlBarPullButton=s;
 //# sourceMappingURL=git-control-bar-pull-button.cjs.map

package/dist/components/features/chat/git-control-bar-pull-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"git-control-bar-pull-button.cjs","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pull-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport ArrowDownIcon from \"#/icons/u-arrow-down.svg?react\";\nimport { cn, getGitPullPrompt } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPullButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPullButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  isConversationReady = true,\n}: GitControlBarPullButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackPullButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePullClick = () => {\n    trackPullButtonClick();\n    onSuggestionsClick(getGitPullPrompt());\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePullClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        \"flex flex-row gap-1 items-center justify-center px-0.5 py-1 rounded-[100px] w-[76px] min-w-[76px]\",\n        isButtonEnabled\n          ? \"bg-[var(--oh-surface)] hover:bg-tertiary cursor-pointer\"\n          : \"bg-[rgba(71,74,84,0.50)] cursor-not-allowed\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <ArrowDownIcon width={12} height={12} color=\"white\" />\n      </div>\n      <div\n        className=\"font-normal text-white text-sm leading-5 max-w-[76px] truncate\"\n        title={t(I18nKey.COMMON$PULL)}\n      >\n        {t(I18nKey.COMMON$PULL)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":"mVAaA,SAAgB,EAAwB,CACtC,qBACA,gBACA,sBACA,sBAAsB,IACS,CAC/B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,wBAAyB,EAAA,aAAa,CAExC,EACJ,GAAuB,GAAiB,EAO1C,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAR0B,CAC5B,GAAsB,CACtB,EAAmB,EAAA,kBAAkB,CAAC,EAOpC,SAAU,CAAC,EACX,UAAW,EAAA,GACT,oGACA,EACI,0DACA,8CACL,UATH,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACb,EAAA,EAAA,KAAC,EAAA,QAAD,CAAe,MAAO,GAAI,OAAQ,GAAI,MAAM,QAAU,CAAA,CAClD,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,iEACV,MAAO,EAAE,EAAA,QAAQ,YAAY,UAE5B,EAAE,EAAA,QAAQ,YAAY,CACnB,CAAA,CACC"}
+{"version":3,"file":"git-control-bar-pull-button.cjs","names":[],"sources":["../../../../src/components/features/chat/git-control-bar-pull-button.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport ArrowDownIcon from \"#/icons/u-arrow-down.svg?react\";\nimport { cn, getGitPullPrompt } from \"#/utils/utils\";\nimport {\n  gitControlBarActionButtonClassName,\n  gitControlBarActionIconColor,\n  gitControlBarActionLabelClassName,\n} from \"#/utils/git-control-bar-classes\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useTracking } from \"#/hooks/use-tracking\";\n\ninterface GitControlBarPullButtonProps {\n  onSuggestionsClick: (value: string) => void;\n  hasRepository: boolean;\n  providerTokensReady: boolean;\n  isConversationReady?: boolean;\n}\n\nexport function GitControlBarPullButton({\n  onSuggestionsClick,\n  hasRepository,\n  providerTokensReady,\n  isConversationReady = true,\n}: GitControlBarPullButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackPullButtonClick } = useTracking();\n\n  const isButtonEnabled =\n    providerTokensReady && hasRepository && isConversationReady;\n\n  const handlePullClick = () => {\n    trackPullButtonClick();\n    onSuggestionsClick(getGitPullPrompt());\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handlePullClick}\n      disabled={!isButtonEnabled}\n      className={cn(\n        gitControlBarActionButtonClassName(isButtonEnabled),\n        \"px-0.5 py-1 w-[76px] min-w-[76px]\",\n      )}\n    >\n      <div className=\"w-3 h-3 flex items-center justify-center\">\n        <ArrowDownIcon\n          width={12}\n          height={12}\n          color={gitControlBarActionIconColor(isButtonEnabled)}\n        />\n      </div>\n      <div\n        className={cn(gitControlBarActionLabelClassName, \"max-w-[76px]\")}\n        title={t(I18nKey.COMMON$PULL)}\n      >\n        {t(I18nKey.COMMON$PULL)}\n      </div>\n    </button>\n  );\n}\n"],"mappings":"2YAkBA,SAAgB,EAAwB,CACtC,qBACA,gBACA,sBACA,sBAAsB,IACS,CAC/B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,wBAAyB,EAAA,aAAa,CAExC,EACJ,GAAuB,GAAiB,EAO1C,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAR0B,CAC5B,GAAsB,CACtB,EAAmB,EAAA,kBAAkB,CAAC,EAOpC,SAAU,CAAC,EACX,UAAW,EAAA,GACT,EAAA,mCAAmC,EAAgB,CACnD,oCACD,UAPH,EASE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACb,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,6BAA6B,EAAgB,CACpD,CAAA,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GAAG,EAAA,kCAAmC,eAAe,CAChE,MAAO,EAAE,EAAA,QAAQ,YAAY,UAE5B,EAAE,EAAA,QAAQ,YAAY,CACnB,CAAA,CACC"}