@openhands/agent-canvas 1.12.0 → 1.14.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"custom-chat-input.js","names":[],"sources":["../../../../src/components/features/chat/custom-chat-input.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useChatInputLogic } from \"#/hooks/chat/use-chat-input-logic\";\nimport { useFileHandling } from \"#/hooks/chat/use-file-handling\";\nimport { useGripResize } from \"#/hooks/chat/use-grip-resize\";\nimport { useChatInputEvents } from \"#/hooks/chat/use-chat-input-events\";\nimport { useChatSubmission } from \"#/hooks/chat/use-chat-submission\";\nimport { useSlashCommand } from \"#/hooks/chat/use-slash-command\";\nimport { ChatInputGrip } from \"./components/chat-input-grip\";\nimport { ChatInputContainer } from \"./components/chat-input-container\";\nimport { HiddenFileInput } from \"./components/hidden-file-input\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface CustomChatInputProps {\n  disabled?: boolean;\n  isNewConversationPending?: boolean;\n  hasStartedConversation?: boolean;\n  showButton?: boolean;\n  onSubmit: (message: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onFilesPaste?: (\n    files: File[],\n    options?: import(\"#/hooks/chat/use-chat-attachment-upload\").ChatAttachmentUploadOptions,\n  ) => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  buttonClassName?: React.HTMLAttributes<HTMLButtonElement>[\"className\"];\n}\n\nexport function CustomChatInput({\n  disabled = false,\n  isNewConversationPending = false,\n  hasStartedConversation,\n  showButton = true,\n  onSubmit,\n  onFocus,\n  onBlur,\n  onFilesPaste,\n  className = \"\",\n  buttonClassName = \"\",\n}: CustomChatInputProps) {\n  const [canSubmit, setCanSubmit] = React.useState(false);\n  const {\n    submittedMessage,\n    clearAllFiles,\n    setShouldHideSuggestions,\n    setSubmittedMessage,\n    images,\n    files,\n  } = useConversationStore();\n\n  // Note: we intentionally do NOT disable the input when the conversation is\n  // in an ERROR/STUCK execution state. Users should be able to send a follow-up\n  // message to recover the conversation; the message will be delivered\n  // immediately via the WebSocket if connected, or queued via REST otherwise.\n  const isDisabled = disabled;\n\n  // Always call the latest `onSubmit` without making the effect re-run when\n  // its identity changes. `onSubmit` (typically `handleSendMessage`) is a\n  // fresh function on every parent render, and the parent re-renders\n  // whenever the pending-message queue updates synchronously inside\n  // `onSubmit` itself. Listing it in the dep array caused the effect to\n  // fire twice — once for the original submit and again from the\n  // mid-submit re-render, before `setSubmittedMessage(null)` was applied —\n  // producing a duplicate \"Sending…\" bubble.\n  const onSubmitRef = useRef(onSubmit);\n  useEffect(() => {\n    onSubmitRef.current = onSubmit;\n  }, [onSubmit]);\n\n  // Listen to submittedMessage state changes\n  useEffect(() => {\n    if (!submittedMessage || disabled) {\n      return;\n    }\n    onSubmitRef.current(submittedMessage);\n    setSubmittedMessage(null);\n  }, [submittedMessage, disabled, setSubmittedMessage]);\n\n  // Custom hooks\n  const {\n    chatInputRef,\n    messageToSend,\n    checkIsContentEmpty,\n    clearEmptyContentHandler,\n    saveDraft,\n  } = useChatInputLogic();\n\n  const syncCanSubmit = React.useCallback(() => {\n    const text = chatInputRef.current?.innerText ?? \"\";\n    const hasAttachments = images.length > 0 || files.length > 0;\n    setCanSubmit(text.trim().length > 0 || hasAttachments);\n  }, [chatInputRef, images, files]);\n\n  const {\n    fileInputRef,\n    chatContainerRef,\n    isDragOver,\n    handleFileIconClick,\n    handleFileInputChange,\n    handleDragOver,\n    handleDragLeave,\n    handleDrop,\n  } = useFileHandling(onFilesPaste);\n\n  const {\n    gripRef,\n    isGripVisible,\n    isGripDragging,\n    handleTopEdgeClick,\n    smartResize,\n    handleGripMouseDown,\n    handleGripTouchStart,\n    increaseHeightForEmptyContent,\n    resetManualResize,\n  } = useGripResize(\n    chatInputRef as React.RefObject<HTMLDivElement | null>,\n    messageToSend,\n  );\n\n  const { handleSubmit } = useChatSubmission(\n    chatInputRef as React.RefObject<HTMLDivElement | null>,\n    fileInputRef as React.RefObject<HTMLInputElement | null>,\n    smartResize,\n    onSubmit,\n    resetManualResize,\n  );\n  const handleSubmitAndSync = React.useCallback(() => {\n    handleSubmit();\n    syncCanSubmit();\n  }, [handleSubmit, syncCanSubmit]);\n\n  const { handleInput, handlePaste, handleKeyDown, handleBlur, handleFocus } =\n    useChatInputEvents(\n      chatInputRef as React.RefObject<HTMLDivElement | null>,\n      smartResize,\n      increaseHeightForEmptyContent,\n      checkIsContentEmpty,\n      clearEmptyContentHandler,\n      onFocus,\n      onBlur,\n    );\n\n  const {\n    isMenuOpen: isSlashMenuOpen,\n    filteredItems: slashItems,\n    selectedIndex: slashSelectedIndex,\n    updateSlashMenu,\n    selectItem: selectSlashItem,\n    handleSlashKeyDown,\n    closeMenu: closeSlashMenu,\n  } = useSlashCommand(chatInputRef as React.RefObject<HTMLDivElement | null>);\n\n  // Cleanup: reset suggestions visibility when component unmounts\n  useEffect(\n    () => () => {\n      setShouldHideSuggestions(false);\n      clearAllFiles();\n    },\n    [setShouldHideSuggestions, clearAllFiles],\n  );\n  useEffect(() => {\n    syncCanSubmit();\n  }, [syncCanSubmit, images.length, files.length]);\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {/* Hidden file input */}\n      <HiddenFileInput\n        fileInputRef={fileInputRef}\n        onChange={handleFileInputChange}\n      />\n\n      {/* Container with grip */}\n      <div className=\"relative w-full\">\n        <ChatInputGrip\n          gripRef={gripRef}\n          isGripVisible={isGripVisible}\n          isGripDragging={isGripDragging}\n          handleTopEdgeClick={handleTopEdgeClick}\n          handleGripMouseDown={handleGripMouseDown}\n          handleGripTouchStart={handleGripTouchStart}\n        />\n\n        <ChatInputContainer\n          chatContainerRef={chatContainerRef}\n          isDragOver={isDragOver}\n          disabled={isDisabled}\n          canSubmit={canSubmit}\n          hasStartedConversation={hasStartedConversation}\n          isNewConversationPending={isNewConversationPending}\n          showButton={showButton}\n          buttonClassName={buttonClassName}\n          chatInputRef={chatInputRef}\n          handleFileIconClick={handleFileIconClick}\n          handleSubmit={handleSubmitAndSync}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          onInput={() => {\n            handleInput();\n            updateSlashMenu();\n            saveDraft();\n            syncCanSubmit();\n          }}\n          onPaste={handlePaste}\n          onKeyDown={(e) => {\n            if (handleSlashKeyDown(e)) return;\n            handleKeyDown(e, isDisabled, handleSubmitAndSync);\n          }}\n          onFocus={handleFocus}\n          onBlur={() => {\n            handleBlur();\n            closeSlashMenu();\n            syncCanSubmit();\n          }}\n          isSlashMenuOpen={isSlashMenuOpen}\n          slashItems={slashItems}\n          slashSelectedIndex={slashSelectedIndex}\n          onSlashSelect={selectSlashItem}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,EAAgB,EAC9B,cAAW,IACX,8BAA2B,IAC3B,2BACA,gBAAa,IACb,aACA,aACA,YACA,iBACA,eAAY,IACZ,qBAAkB,MACK;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,EACJ,qBACA,kBACA,6BACA,wBACA,WACA,aACE,EAAqB,GAMnB,IAAa,GAUb,IAAc,EAAO,CAAQ;CAMnC,AALA,QAAgB;EACd,EAAY,UAAU;CACxB,GAAG,CAAC,CAAQ,CAAC,GAGb,QAAgB;EACV,CAAC,KAAoB,MAGzB,EAAY,QAAQ,CAAgB,GACpC,EAAoB,IAAI;CAC1B,GAAG;EAAC;EAAkB;EAAU;CAAmB,CAAC;CAGpD,IAAM,EACJ,iBACA,kBACA,wBACA,6BACA,iBACE,EAAkB,GAEhB,IAAgB,EAAM,kBAAkB;EAC5C,IAAM,IAAO,EAAa,SAAS,aAAa,IAC1C,IAAiB,EAAO,SAAS,KAAK,EAAM,SAAS;EAC3D,EAAa,EAAK,KAAK,EAAE,SAAS,KAAK,CAAc;CACvD,GAAG;EAAC;EAAc;EAAQ;CAAK,CAAC,GAE1B,EACJ,iBACA,qBACA,eACA,wBACA,0BACA,oBACA,oBACA,kBACE,EAAgB,CAAY,GAE1B,EACJ,YACA,kBACA,mBACA,uBACA,gBACA,yBACA,0BACA,mCACA,0BACE,EACF,GACA,CACF,GAEM,EAAE,oBAAiB,EACvB,GACA,GACA,GACA,GACA,EACF,GACM,IAAsB,EAAM,kBAAkB;EAElD,AADA,EAAa,GACb,EAAc;CAChB,GAAG,CAAC,GAAc,CAAa,CAAC,GAE1B,EAAE,iBAAa,iBAAa,mBAAe,gBAAY,oBAC3D,EACE,GACA,GACA,IACA,GACA,GACA,IACA,EACF,GAEI,EACJ,YAAY,IACZ,eAAe,IACf,eAAe,IACf,qBACA,YAAY,IACZ,wBACA,WAAW,OACT,EAAgB,CAAsD;CAa1E,OAVA,cACc;EAEV,AADA,EAAyB,EAAK,GAC9B,EAAc;CAChB,GACA,CAAC,GAA0B,CAAa,CAC1C,GACA,QAAgB;EACd,EAAc;CAChB,GAAG;EAAC;EAAe,EAAO;EAAQ,EAAM;CAAM,CAAC,GAE7C,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,CAAS;YAAtC,CAEE,kBAAC,GAAD;GACgB;GACd,UAAU;EACX,CAAA,GAGD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACW;IACM;IACC;IACI;IACC;IACC;GACvB,CAAA,GAED,kBAAC,GAAD;IACoB;IACN;IACZ,UAAU;IACC;IACa;IACE;IACd;IACK;IACH;IACO;IACrB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;IACR,eAAe;KAIb,AAHA,GAAY,GACZ,GAAgB,GAChB,EAAU,GACV,EAAc;IAChB;IACA,SAAS;IACT,YAAY,MAAM;KACZ,GAAmB,CAAC,KACxB,GAAc,GAAG,GAAY,CAAmB;IAClD;IACA,SAAS;IACT,cAAc;KAGZ,AAFA,GAAW,GACX,GAAe,GACf,EAAc;IAChB;IACiB;IACL;IACQ;IACpB,eAAe;GAChB,CAAA,CACE;IACF;;AAET"}
+{"version":3,"file":"custom-chat-input.js","names":[],"sources":["../../../../src/components/features/chat/custom-chat-input.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useChatInputLogic } from \"#/hooks/chat/use-chat-input-logic\";\nimport { useFileHandling } from \"#/hooks/chat/use-file-handling\";\nimport { useGripResize } from \"#/hooks/chat/use-grip-resize\";\nimport { useChatInputEvents } from \"#/hooks/chat/use-chat-input-events\";\nimport { useChatSubmission } from \"#/hooks/chat/use-chat-submission\";\nimport { useSlashCommand } from \"#/hooks/chat/use-slash-command\";\nimport { ChatInputGrip } from \"./components/chat-input-grip\";\nimport { ChatInputContainer } from \"./components/chat-input-container\";\nimport { HiddenFileInput } from \"./components/hidden-file-input\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface CustomChatInputProps {\n  disabled?: boolean;\n  isNewConversationPending?: boolean;\n  hasStartedConversation?: boolean;\n  showButton?: boolean;\n  onSubmit: (message: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onFilesPaste?: (\n    files: File[],\n    options?: import(\"#/hooks/chat/use-chat-attachment-upload\").ChatAttachmentUploadOptions,\n  ) => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  buttonClassName?: React.HTMLAttributes<HTMLButtonElement>[\"className\"];\n}\n\nexport function CustomChatInput({\n  disabled = false,\n  isNewConversationPending = false,\n  hasStartedConversation,\n  showButton = true,\n  onSubmit,\n  onFocus,\n  onBlur,\n  onFilesPaste,\n  className = \"\",\n  buttonClassName = \"\",\n}: CustomChatInputProps) {\n  const [canSubmit, setCanSubmit] = React.useState(false);\n  const {\n    submittedMessage,\n    clearAllFiles,\n    setShouldHideSuggestions,\n    setSubmittedMessage,\n    images,\n    files,\n  } = useConversationStore();\n\n  // Note: we intentionally do NOT disable the input when the conversation is\n  // in an ERROR/STUCK execution state. Users should be able to send a follow-up\n  // message to recover the conversation; the message will be delivered\n  // immediately via the WebSocket if connected, or queued via REST otherwise.\n  const isDisabled = disabled;\n\n  // Always call the latest `onSubmit` without making the effect re-run when\n  // its identity changes. `onSubmit` (typically `handleSendMessage`) is a\n  // fresh function on every parent render, and the parent re-renders\n  // whenever the pending-message queue updates synchronously inside\n  // `onSubmit` itself. Listing it in the dep array caused the effect to\n  // fire twice — once for the original submit and again from the\n  // mid-submit re-render, before `setSubmittedMessage(null)` was applied —\n  // producing a duplicate \"Sending…\" bubble.\n  const onSubmitRef = useRef(onSubmit);\n  useEffect(() => {\n    onSubmitRef.current = onSubmit;\n  }, [onSubmit]);\n\n  // Listen to submittedMessage state changes\n  useEffect(() => {\n    if (!submittedMessage || disabled) {\n      return;\n    }\n    onSubmitRef.current(submittedMessage);\n    setSubmittedMessage(null);\n  }, [submittedMessage, disabled, setSubmittedMessage]);\n\n  // Custom hooks\n  const {\n    chatInputRef,\n    messageToSend,\n    checkIsContentEmpty,\n    clearEmptyContentHandler,\n    saveDraft,\n  } = useChatInputLogic();\n\n  const syncCanSubmit = React.useCallback(() => {\n    const text = chatInputRef.current?.innerText ?? \"\";\n    const hasAttachments = images.length > 0 || files.length > 0;\n    setCanSubmit(text.trim().length > 0 || hasAttachments);\n  }, [chatInputRef, images, files]);\n\n  const {\n    fileInputRef,\n    chatContainerRef,\n    isDragOver,\n    handleFileIconClick,\n    handleFileInputChange,\n    handleDragOver,\n    handleDragLeave,\n    handleDrop,\n  } = useFileHandling(onFilesPaste);\n\n  const {\n    gripRef,\n    isGripVisible,\n    isGripDragging,\n    canResize,\n    handleTopEdgeClick,\n    smartResize,\n    handleGripMouseDown,\n    handleGripTouchStart,\n    increaseHeightForEmptyContent,\n    resetManualResize,\n  } = useGripResize(\n    chatInputRef as React.RefObject<HTMLDivElement | null>,\n    messageToSend,\n  );\n\n  const { handleSubmit } = useChatSubmission(\n    chatInputRef as React.RefObject<HTMLDivElement | null>,\n    fileInputRef as React.RefObject<HTMLInputElement | null>,\n    smartResize,\n    onSubmit,\n    resetManualResize,\n  );\n  const handleSubmitAndSync = React.useCallback(() => {\n    handleSubmit();\n    syncCanSubmit();\n  }, [handleSubmit, syncCanSubmit]);\n\n  const { handleInput, handlePaste, handleKeyDown, handleBlur, handleFocus } =\n    useChatInputEvents(\n      chatInputRef as React.RefObject<HTMLDivElement | null>,\n      smartResize,\n      increaseHeightForEmptyContent,\n      checkIsContentEmpty,\n      clearEmptyContentHandler,\n      onFocus,\n      onBlur,\n    );\n\n  const {\n    isMenuOpen: isSlashMenuOpen,\n    filteredItems: slashItems,\n    selectedIndex: slashSelectedIndex,\n    updateSlashMenu,\n    selectItem: selectSlashItem,\n    handleSlashKeyDown,\n    closeMenu: closeSlashMenu,\n  } = useSlashCommand(chatInputRef as React.RefObject<HTMLDivElement | null>);\n\n  // Cleanup: reset suggestions visibility when component unmounts\n  useEffect(\n    () => () => {\n      setShouldHideSuggestions(false);\n      clearAllFiles();\n    },\n    [setShouldHideSuggestions, clearAllFiles],\n  );\n  useEffect(() => {\n    syncCanSubmit();\n  }, [syncCanSubmit, images.length, files.length]);\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {/* Hidden file input */}\n      <HiddenFileInput\n        fileInputRef={fileInputRef}\n        onChange={handleFileInputChange}\n      />\n\n      {/* Container with grip */}\n      <div className=\"relative w-full\">\n        <ChatInputGrip\n          gripRef={gripRef}\n          isGripVisible={isGripVisible}\n          isGripDragging={isGripDragging}\n          canResize={canResize}\n          handleTopEdgeClick={handleTopEdgeClick}\n          handleGripMouseDown={handleGripMouseDown}\n          handleGripTouchStart={handleGripTouchStart}\n        />\n\n        <ChatInputContainer\n          chatContainerRef={chatContainerRef}\n          isDragOver={isDragOver}\n          disabled={isDisabled}\n          canSubmit={canSubmit}\n          hasStartedConversation={hasStartedConversation}\n          isNewConversationPending={isNewConversationPending}\n          showButton={showButton}\n          buttonClassName={buttonClassName}\n          chatInputRef={chatInputRef}\n          handleFileIconClick={handleFileIconClick}\n          handleSubmit={handleSubmitAndSync}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          onInput={() => {\n            handleInput();\n            updateSlashMenu();\n            saveDraft();\n            syncCanSubmit();\n          }}\n          onPaste={handlePaste}\n          onKeyDown={(e) => {\n            if (handleSlashKeyDown(e)) return;\n            handleKeyDown(e, isDisabled, handleSubmitAndSync);\n          }}\n          onFocus={handleFocus}\n          onBlur={() => {\n            handleBlur();\n            closeSlashMenu();\n            syncCanSubmit();\n          }}\n          isSlashMenuOpen={isSlashMenuOpen}\n          slashItems={slashItems}\n          slashSelectedIndex={slashSelectedIndex}\n          onSlashSelect={selectSlashItem}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,EAAgB,EAC9B,cAAW,IACX,8BAA2B,IAC3B,2BACA,gBAAa,IACb,aACA,aACA,YACA,iBACA,eAAY,IACZ,qBAAkB,MACK;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,EACJ,qBACA,kBACA,6BACA,wBACA,WACA,aACE,EAAqB,GAMnB,IAAa,GAUb,IAAc,EAAO,CAAQ;CAMnC,AALA,QAAgB;EACd,EAAY,UAAU;CACxB,GAAG,CAAC,CAAQ,CAAC,GAGb,QAAgB;EACV,CAAC,KAAoB,MAGzB,EAAY,QAAQ,CAAgB,GACpC,EAAoB,IAAI;CAC1B,GAAG;EAAC;EAAkB;EAAU;CAAmB,CAAC;CAGpD,IAAM,EACJ,iBACA,kBACA,wBACA,6BACA,iBACE,EAAkB,GAEhB,IAAgB,EAAM,kBAAkB;EAC5C,IAAM,IAAO,EAAa,SAAS,aAAa,IAC1C,IAAiB,EAAO,SAAS,KAAK,EAAM,SAAS;EAC3D,EAAa,EAAK,KAAK,EAAE,SAAS,KAAK,CAAc;CACvD,GAAG;EAAC;EAAc;EAAQ;CAAK,CAAC,GAE1B,EACJ,iBACA,qBACA,eACA,wBACA,0BACA,oBACA,oBACA,kBACE,EAAgB,CAAY,GAE1B,EACJ,YACA,kBACA,mBACA,cACA,uBACA,gBACA,yBACA,0BACA,mCACA,0BACE,EACF,GACA,CACF,GAEM,EAAE,oBAAiB,EACvB,GACA,GACA,GACA,GACA,EACF,GACM,IAAsB,EAAM,kBAAkB;EAElD,AADA,EAAa,GACb,EAAc;CAChB,GAAG,CAAC,GAAc,CAAa,CAAC,GAE1B,EAAE,iBAAa,iBAAa,mBAAe,gBAAY,oBAC3D,EACE,GACA,GACA,IACA,GACA,GACA,IACA,EACF,GAEI,EACJ,YAAY,IACZ,eAAe,IACf,eAAe,IACf,qBACA,YAAY,IACZ,wBACA,WAAW,OACT,GAAgB,CAAsD;CAa1E,OAVA,cACc;EAEV,AADA,EAAyB,EAAK,GAC9B,EAAc;CAChB,GACA,CAAC,GAA0B,CAAa,CAC1C,GACA,QAAgB;EACd,EAAc;CAChB,GAAG;EAAC;EAAe,EAAO;EAAQ,EAAM;CAAM,CAAC,GAE7C,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,CAAS;YAAtC,CAEE,kBAAC,GAAD;GACgB;GACd,UAAU;EACX,CAAA,GAGD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACW;IACM;IACC;IACL;IACS;IACC;IACC;GACvB,CAAA,GAED,kBAAC,GAAD;IACoB;IACN;IACZ,UAAU;IACC;IACa;IACE;IACd;IACK;IACH;IACO;IACrB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;IACR,eAAe;KAIb,AAHA,GAAY,GACZ,GAAgB,GAChB,EAAU,GACV,EAAc;IAChB;IACA,SAAS;IACT,YAAY,MAAM;KACZ,GAAmB,CAAC,KACxB,GAAc,GAAG,GAAY,CAAmB;IAClD;IACA,SAAS;IACT,cAAc;KAGZ,AAFA,GAAW,GACX,GAAe,GACf,EAAc;IAChB;IACiB;IACL;IACQ;IACpB,eAAe;GAChB,CAAA,CACE;IACF;;AAET"}

package/dist/components/features/chat/error-message-banner.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),r=require("../../../i18n/declaration.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/copy.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/x.cjs"),c=require("../../../constants/status-colors.cjs"),l=require("../../../utils/utils.cjs"),u=require("../../../utils/custom-toast-handlers.cjs"),d=require("../../../utils/acp-error-codes.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=220;function h({message:e,code:h,onDismiss:g,onRetry:_,onReauth:v}){let{t:y,i18n:b}=n.useTranslation(`openhands`),x=d.getAcpErrorHeaderKey(h),[S,C]=f.default.useState(!1),[w,T]=f.default.useState(!1),[E,D]=f.default.useState(!1),O=f.default.useRef(null),k=b.exists(e,{ns:`openhands`}),A=k?String(y(e)):e,j=A.length>m,M=j&&!S;return f.default.useEffect(()=>{if(!E)return;let e=setTimeout(()=>{D(!1)},2e3);return()=>clearTimeout(e)},[E]),f.default.useEffect(()=>{D(!1)},[A]),f.default.useLayoutEffect(()=>{let e=O.current;if(!e)return;let t=()=>{let t=Number.parseFloat(getComputedStyle(e).lineHeight);if(!Number.isFinite(t)||t<=0){T(!1);return}T(e.getBoundingClientRect().height>t*1.5)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[A,M,S,e]),(0,p.jsxs)(`div`,{className:l.cn(`flex w-full gap-2 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-2 text-[var(--oh-foreground)]`,w?`items-start`:`items-center`),"data-testid":`error-message-banner`,children:[(0,p.jsx)(a.CircleX,{"aria-hidden":!0,className:`h-4 w-4 shrink-0`,strokeWidth:2,style:{color:c.OH_STATUS_ERROR_COLOR},"data-testid":`error-message-banner-icon`}),(0,p.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[x&&(0,p.jsx)(`div`,{className:`text-sm font-medium text-[var(--oh-foreground)]`,"data-testid":`error-message-banner-header`,children:y(x)}),(0,p.jsx)(`div`,{ref:O,className:l.cn(`whitespace-pre-wrap break-words text-sm text-[var(--oh-muted)]`,M&&`line-clamp-3`),"data-testid":`error-message-banner-content`,children:k?(0,p.jsx)(t.Trans,{ns:`openhands`,i18nKey:e}):e}),v&&(0,p.jsx)(`button`,{type:`button`,onClick:v,className:`mt-2 cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`error-message-banner-reauth`,children:y(r.I18nKey.ERROR$ACP_UPDATE_CREDENTIALS)}),j&&(0,p.jsx)(`button`,{type:`button`,className:`mt-1 cursor-pointer text-xs font-normal text-[var(--oh-foreground)] underline`,onClick:()=>C(e=>!e),"data-testid":`error-message-banner-toggle`,children:y(S?r.I18nKey.COMMON$VIEW_LESS:r.I18nKey.COMMON$VIEW_MORE)})]}),(0,p.jsxs)(`div`,{className:l.cn(`flex shrink-0 gap-1`,w?`self-start`:`items-center`),children:[_&&(0,p.jsx)(`button`,{type:`button`,onClick:_,className:`cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`error-message-banner-retry`,children:y(r.I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}),(0,p.jsx)(`button`,{type:`button`,onClick:async()=>{try{await navigator.clipboard.writeText(A),D(!0)}catch{u.displayErrorToast(y(r.I18nKey.CHAT_INTERFACE$CHAT_MESSAGE_COPY_FAILED))}},className:`shrink-0 cursor-pointer rounded-md p-1 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,"aria-label":y(E?r.I18nKey.BUTTON$COPIED:r.I18nKey.BUTTON$COPY),"data-testid":`error-message-banner-copy`,children:E?(0,p.jsx)(i.Check,{className:`h-4 w-4`,"aria-hidden":!0}):(0,p.jsx)(o.Copy,{className:`h-4 w-4`,"aria-hidden":!0})}),g&&(0,p.jsx)(`button`,{type:`button`,onClick:g,className:`shrink-0 cursor-pointer rounded-md p-1 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,"aria-label":y(r.I18nKey.BUTTON$CLOSE),"data-testid":`error-message-banner-dismiss`,children:(0,p.jsx)(s.X,{className:`h-4 w-4`,"aria-hidden":!0})})]})]})}exports.ErrorMessageBanner=h;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),r=require("../../../i18n/declaration.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/circle-alert.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/copy.cjs"),c=require("../../../node_modules/lucide-react/dist/esm/icons/x.cjs"),l=require("../../../constants/status-colors.cjs"),u=require("../../../utils/utils.cjs"),d=require("../../../utils/custom-toast-handlers.cjs"),f=require("../../../utils/acp-error-codes.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=220;function g({message:e,code:g,onDismiss:_,onRetry:v,onReauth:y,classification:b}){let{t:x,i18n:S}=n.useTranslation(`openhands`),C=f.getAcpErrorHeaderKey(g),[w,T]=p.default.useState(!1),[E,D]=p.default.useState(!1),[O,k]=p.default.useState(!1),A=p.default.useRef(null),j=S.exists(e,{ns:`openhands`}),M=j?String(x(e)):e,N=M.length>h,P=N&&!w;return p.default.useEffect(()=>{if(!O)return;let e=setTimeout(()=>{k(!1)},2e3);return()=>clearTimeout(e)},[O]),p.default.useEffect(()=>{k(!1)},[M]),p.default.useLayoutEffect(()=>{let e=A.current;if(!e)return;let t=()=>{let t=Number.parseFloat(getComputedStyle(e).lineHeight);if(!Number.isFinite(t)||t<=0){D(!1);return}D(e.getBoundingClientRect().height>t*1.5)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[M,P,w,e]),(0,m.jsxs)(`div`,{className:u.cn(`flex w-full gap-2 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-2 text-[var(--oh-foreground)]`,E?`items-start`:`items-center`),"data-testid":`error-message-banner`,children:[b!=null&&b.kind!==`internal`&&b.kind!==`unknown`?(0,m.jsx)(a.CircleAlert,{"aria-hidden":!0,className:`h-4 w-4 shrink-0 text-[var(--oh-warning)]`,strokeWidth:2,"data-testid":`warning-message-banner-icon`}):(0,m.jsx)(o.CircleX,{"aria-hidden":!0,className:`h-4 w-4 shrink-0`,strokeWidth:2,style:{color:l.OH_STATUS_ERROR_COLOR},"data-testid":`error-message-banner-icon`}),(0,m.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[C&&(0,m.jsx)(`div`,{className:`text-sm font-medium text-[var(--oh-foreground)]`,"data-testid":`error-message-banner-header`,children:x(C)}),(0,m.jsx)(`div`,{ref:A,className:u.cn(`whitespace-pre-wrap break-words text-sm text-[var(--oh-muted)]`,P&&`line-clamp-3`),"data-testid":`error-message-banner-content`,children:j?(0,m.jsx)(t.Trans,{ns:`openhands`,i18nKey:e}):e}),y&&(0,m.jsx)(`button`,{type:`button`,onClick:y,className:`mt-2 cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`error-message-banner-reauth`,children:x(r.I18nKey.ERROR$ACP_UPDATE_CREDENTIALS)}),N&&(0,m.jsx)(`button`,{type:`button`,className:`mt-1 cursor-pointer text-xs font-normal text-[var(--oh-foreground)] underline`,onClick:()=>T(e=>!e),"data-testid":`error-message-banner-toggle`,children:x(w?r.I18nKey.COMMON$VIEW_LESS:r.I18nKey.COMMON$VIEW_MORE)})]}),(0,m.jsxs)(`div`,{className:u.cn(`flex shrink-0 gap-1`,E?`self-start`:`items-center`),children:[v&&(0,m.jsx)(`button`,{type:`button`,onClick:v,className:`cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`error-message-banner-retry`,children:x(r.I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}),(0,m.jsx)(`button`,{type:`button`,onClick:async()=>{try{await navigator.clipboard.writeText(M),k(!0)}catch{d.displayErrorToast(x(r.I18nKey.CHAT_INTERFACE$CHAT_MESSAGE_COPY_FAILED))}},className:`shrink-0 cursor-pointer rounded-md p-1 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,"aria-label":x(O?r.I18nKey.BUTTON$COPIED:r.I18nKey.BUTTON$COPY),"data-testid":`error-message-banner-copy`,children:O?(0,m.jsx)(i.Check,{className:`h-4 w-4`,"aria-hidden":!0}):(0,m.jsx)(s.Copy,{className:`h-4 w-4`,"aria-hidden":!0})}),_&&(0,m.jsx)(`button`,{type:`button`,onClick:_,className:`shrink-0 cursor-pointer rounded-md p-1 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,"aria-label":x(r.I18nKey.BUTTON$CLOSE),"data-testid":`error-message-banner-dismiss`,children:(0,m.jsx)(c.X,{className:`h-4 w-4`,"aria-hidden":!0})})]})]})}exports.ErrorMessageBanner=g;
 //# sourceMappingURL=error-message-banner.cjs.map