@openhands/agent-canvas 1.4.0 → 1.5.1

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

@@ -12,78 +12,79 @@ 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";
 //#region src/components/features/chat/custom-chat-input.tsx
-function g({ disabled: g = !1, isNewConversationPending: _ = !1, showButton: v = !0, onSubmit: y, onFocus: b, onBlur: ee, onFilesPaste: te, className: x = "", buttonClassName: S = "" }) {
-	let [C, w] = d.useState(!1), { submittedMessage: T, clearAllFiles: E, setShouldHideSuggestions: D, setSubmittedMessage: O, images: k, files: A } = t(), j = g, M = p(y);
+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(() => {
-		M.current = y;
-	}, [y]), f(() => {
-		!T || g || (M.current(T), O(null));
+		N.current = b;
+	}, [b]), f(() => {
+		!E || g || (N.current(E), k(null));
 	}, [
-		T,
+		E,
 		g,
-		O
+		k
 	]);
-	let { chatInputRef: N, messageToSend: P, checkIsContentEmpty: F, clearEmptyContentHandler: I, saveDraft: L } = n(), R = d.useCallback(() => {
-		let e = N.current?.innerText ?? "", t = k.length > 0 || A.length > 0;
-		w(e.trim().length > 0 || t);
+	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);
 	}, [
-		N,
-		k,
-		A
-	]), { fileInputRef: z, chatContainerRef: B, isDragOver: V, handleFileIconClick: H, handleFileInputChange: U, handleDragOver: W, handleDragLeave: ne, handleDrop: G } = r(te), { gripRef: K, isGripVisible: q, isGripDragging: J, handleTopEdgeClick: Y, smartResize: X, handleGripMouseDown: Z, handleGripTouchStart: re, increaseHeightForEmptyContent: ie, resetManualResize: ae } = i(N, P), { handleSubmit: Q } = o(N, z, X, y, ae), $ = d.useCallback(() => {
-		Q(), R();
-	}, [Q, R]), { handleInput: oe, handlePaste: se, handleKeyDown: ce, handleBlur: le, handleFocus: ue } = a(N, X, ie, F, I, b, ee), { isMenuOpen: de, filteredItems: fe, selectedIndex: pe, updateSlashMenu: me, selectItem: he, handleSlashKeyDown: ge, closeMenu: _e } = s(N);
+		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(() => () => {
-		D(!1), E();
-	}, [D, E]), f(() => {
-		R();
+		O(!1), D();
+	}, [O, D]), f(() => {
+		z();
 	}, [
-		R,
-		k.length,
-		A.length
+		z,
+		A.length,
+		j.length
 	]), /* @__PURE__ */ h("div", {
-		className: e("w-full", x),
+		className: e("w-full", S),
 		children: [/* @__PURE__ */ m(u, {
-			fileInputRef: z,
-			onChange: U
+			fileInputRef: B,
+			onChange: W
 		}), /* @__PURE__ */ h("div", {
 			className: "relative w-full",
 			children: [/* @__PURE__ */ m(c, {
-				gripRef: K,
-				isGripVisible: q,
-				isGripDragging: J,
-				handleTopEdgeClick: Y,
-				handleGripMouseDown: Z,
-				handleGripTouchStart: re
+				gripRef: q,
+				isGripVisible: J,
+				isGripDragging: Y,
+				handleTopEdgeClick: X,
+				handleGripMouseDown: re,
+				handleGripTouchStart: ie
 			}), /* @__PURE__ */ m(l, {
-				chatContainerRef: B,
-				isDragOver: V,
-				disabled: j,
-				canSubmit: C,
+				chatContainerRef: V,
+				isDragOver: H,
+				disabled: M,
+				canSubmit: w,
+				hasStartedConversation: v,
 				isNewConversationPending: _,
-				showButton: v,
-				buttonClassName: S,
-				chatInputRef: N,
-				handleFileIconClick: H,
+				showButton: y,
+				buttonClassName: C,
+				chatInputRef: P,
+				handleFileIconClick: U,
 				handleSubmit: $,
-				onDragOver: W,
-				onDragLeave: ne,
-				onDrop: G,
+				onDragOver: ne,
+				onDragLeave: G,
+				onDrop: K,
 				onInput: () => {
-					oe(), me(), L(), R();
+					se(), he(), R(), z();
 				},
-				onPaste: se,
+				onPaste: ce,
 				onKeyDown: (e) => {
-					ge(e) || ce(e, j, $);
+					_e(e) || le(e, M, $);
 				},
-				onFocus: ue,
+				onFocus: de,
 				onBlur: () => {
-					le(), _e(), R();
+					ue(), ve(), z();
 				},
-				isSlashMenuOpen: de,
-				slashItems: fe,
-				slashSelectedIndex: pe,
-				onSlashSelect: he
+				isSlashMenuOpen: fe,
+				slashItems: pe,
+				slashSelectedIndex: me,
+				onSlashSelect: ge
 			})]
 		})]
 	});

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  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  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          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":";;;;;;;;;;;;;;AA4BA,SAAgB,EAAgB,EAC9B,cAAW,IACX,8BAA2B,IAC3B,gBAAa,IACb,aACA,YACA,YACA,kBACA,eAAY,IACZ,qBAAkB,MACK;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,EACJ,qBACA,kBACA,6BACA,wBACA,WACA,aACE,GAAsB,EAMpB,IAAa,GAUb,IAAc,EAAO,EAAS;AAMpC,CALA,QAAgB;AACd,IAAY,UAAU;IACrB,CAAC,EAAS,CAAC,EAGd,QAAgB;AACV,GAAC,KAAoB,MAGzB,EAAY,QAAQ,EAAiB,EACrC,EAAoB,KAAK;IACxB;EAAC;EAAkB;EAAU;EAAoB,CAAC;CAGrD,IAAM,EACJ,iBACA,kBACA,wBACA,6BACA,iBACE,GAAmB,EAEjB,IAAgB,EAAM,kBAAkB;EAC5C,IAAM,IAAO,EAAa,SAAS,aAAa,IAC1C,IAAiB,EAAO,SAAS,KAAK,EAAM,SAAS;AAC3D,IAAa,EAAK,MAAM,CAAC,SAAS,KAAK,EAAe;IACrD;EAAC;EAAc;EAAQ;EAAM,CAAC,EAE3B,EACJ,iBACA,qBACA,eACA,wBACA,0BACA,mBACA,qBACA,kBACE,EAAgB,GAAa,EAE3B,EACJ,YACA,kBACA,mBACA,uBACA,gBACA,wBACA,0BACA,mCACA,0BACE,EACF,GACA,EACD,EAEK,EAAE,oBAAiB,EACvB,GACA,GACA,GACA,GACA,GACD,EACK,IAAsB,EAAM,kBAAkB;AAElD,EADA,GAAc,EACd,GAAe;IACd,CAAC,GAAc,EAAc,CAAC,EAE3B,EAAE,iBAAa,iBAAa,mBAAe,gBAAY,oBAC3D,EACE,GACA,GACA,IACA,GACA,GACA,GACA,GACD,EAEG,EACJ,YAAY,IACZ,eAAe,IACf,eAAe,IACf,qBACA,YAAY,IACZ,wBACA,WAAW,OACT,EAAgB,EAAuD;AAa3E,QAVA,cACc;AAEV,EADA,EAAyB,GAAM,EAC/B,GAAe;IAEjB,CAAC,GAA0B,EAAc,CAC1C,EACD,QAAgB;AACd,KAAe;IACd;EAAC;EAAe,EAAO;EAAQ,EAAM;EAAO,CAAC,EAE9C,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,EAAU;YAAvC,CAEE,kBAAC,GAAD;GACgB;GACd,UAAU;GACV,CAAA,EAGF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACW;IACM;IACC;IACI;IACC;IACC;IACtB,CAAA,EAEF,kBAAC,GAAD;IACoB;IACN;IACZ,UAAU;IACC;IACe;IACd;IACK;IACH;IACO;IACrB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;IACR,eAAe;AAIb,KAHA,IAAa,EACb,IAAiB,EACjB,GAAW,EACX,GAAe;;IAEjB,SAAS;IACT,YAAY,MAAM;AACZ,QAAmB,EAAE,IACzB,GAAc,GAAG,GAAY,EAAoB;;IAEnD,SAAS;IACT,cAAc;AAGZ,KAFA,IAAY,EACZ,IAAgB,EAChB,GAAe;;IAEA;IACL;IACQ;IACpB,eAAe;IACf,CAAA,CACE;KACF"}
+{"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,GAAM,EACjD,EACJ,qBACA,kBACA,6BACA,wBACA,WACA,aACE,GAAsB,EAMpB,IAAa,GAUb,IAAc,EAAO,EAAS;AAMpC,CALA,QAAgB;AACd,IAAY,UAAU;IACrB,CAAC,EAAS,CAAC,EAGd,QAAgB;AACV,GAAC,KAAoB,MAGzB,EAAY,QAAQ,EAAiB,EACrC,EAAoB,KAAK;IACxB;EAAC;EAAkB;EAAU;EAAoB,CAAC;CAGrD,IAAM,EACJ,iBACA,kBACA,wBACA,6BACA,iBACE,GAAmB,EAEjB,IAAgB,EAAM,kBAAkB;EAC5C,IAAM,IAAO,EAAa,SAAS,aAAa,IAC1C,IAAiB,EAAO,SAAS,KAAK,EAAM,SAAS;AAC3D,IAAa,EAAK,MAAM,CAAC,SAAS,KAAK,EAAe;IACrD;EAAC;EAAc;EAAQ;EAAM,CAAC,EAE3B,EACJ,iBACA,qBACA,eACA,wBACA,0BACA,oBACA,oBACA,kBACE,EAAgB,EAAa,EAE3B,EACJ,YACA,kBACA,mBACA,uBACA,gBACA,yBACA,0BACA,mCACA,0BACE,EACF,GACA,EACD,EAEK,EAAE,oBAAiB,EACvB,GACA,GACA,GACA,GACA,GACD,EACK,IAAsB,EAAM,kBAAkB;AAElD,EADA,GAAc,EACd,GAAe;IACd,CAAC,GAAc,EAAc,CAAC,EAE3B,EAAE,iBAAa,iBAAa,mBAAe,gBAAY,oBAC3D,EACE,GACA,GACA,IACA,GACA,GACA,IACA,GACD,EAEG,EACJ,YAAY,IACZ,eAAe,IACf,eAAe,IACf,qBACA,YAAY,IACZ,wBACA,WAAW,OACT,EAAgB,EAAuD;AAa3E,QAVA,cACc;AAEV,EADA,EAAyB,GAAM,EAC/B,GAAe;IAEjB,CAAC,GAA0B,EAAc,CAC1C,EACD,QAAgB;AACd,KAAe;IACd;EAAC;EAAe,EAAO;EAAQ,EAAM;EAAO,CAAC,EAE9C,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,EAAU;YAAvC,CAEE,kBAAC,GAAD;GACgB;GACd,UAAU;GACV,CAAA,EAGF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACW;IACM;IACC;IACI;IACC;IACC;IACtB,CAAA,EAEF,kBAAC,GAAD;IACoB;IACN;IACZ,UAAU;IACC;IACa;IACE;IACd;IACK;IACH;IACO;IACrB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;IACR,eAAe;AAIb,KAHA,IAAa,EACb,IAAiB,EACjB,GAAW,EACX,GAAe;;IAEjB,SAAS;IACT,YAAY,MAAM;AACZ,QAAmB,EAAE,IACzB,GAAc,GAAG,GAAY,EAAoB;;IAEnD,SAAS;IACT,cAAc;AAGZ,KAFA,IAAY,EACZ,IAAgB,EAChB,GAAe;;IAEA;IACL;IACQ;IACpB,eAAe;IACf,CAAA,CACE;KACF"}

package/dist/components/features/chat/interactive-chat-box.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/agent-state.cjs`),t=require(`../../../utils/utils.cjs`),n=require(`../../../hooks/use-conversation-id.cjs`),r=require(`../../../stores/conversation-store.cjs`),i=require(`../../../hooks/query/use-active-conversation.cjs`),a=require(`../../../hooks/use-agent-state.cjs`),o=require(`./utils/chat-input.utils.cjs`),s=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),c=require(`./custom-chat-input.cjs`),l=require(`../../../hooks/chat/use-btw-interceptor.cjs`),u=require(`../../../hooks/chat/use-goal-interceptor.cjs`),d=require(`../../../hooks/chat/use-model-interceptor.cjs`),f=require(`../../../hooks/chat/use-chat-attachment-upload.cjs`),p=require(`./git-control-bar.cjs`);let m=require(`react/jsx-runtime`);function h({onSubmit:h,disabled:g=!1}){let{images:_,files:v,imagesMarkedUploadAsFile:y,clearAllFiles:b,subConversationTaskId:x}=r.useConversationStore(),{curAgentState:S}=a.useAgentState(),{data:C}=i.useActiveConversation(),{conversationId:w}=n.useOptionalConversationId(),T=w??C?.id??null,{taskStatus:E}=s.useSubConversationTaskPolling(x,C?.id||null),{handleUpload:D}=f.useChatAttachmentUpload(),O=d.useModelInterceptor(T,u.useGoalInterceptor(T,l.useBtwInterceptor(T,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(_,y);h(e,t,[...v,...n]),b()})));return(0,m.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,m.jsx)(c.CustomChatInput,{disabled:g||S===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(E),isNewConversationPending:g,onSubmit:O,onFilesPaste:D}),(0,m.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,m.jsx)(p.GitControlBar,{onSuggestionsClick:e=>{O(e)}})})]})}exports.InteractiveChatBox=h;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/agent-state.cjs`),t=require(`../../../utils/utils.cjs`),n=require(`../../../hooks/use-conversation-id.cjs`),r=require(`../../../stores/conversation-store.cjs`),i=require(`../../../hooks/query/use-active-conversation.cjs`),a=require(`../../../hooks/use-agent-state.cjs`),o=require(`./utils/chat-input.utils.cjs`),s=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),c=require(`./custom-chat-input.cjs`),l=require(`../../../hooks/chat/use-btw-interceptor.cjs`),u=require(`../../../hooks/chat/use-goal-interceptor.cjs`),d=require(`../../../hooks/chat/use-model-interceptor.cjs`),f=require(`../../../hooks/chat/use-chat-attachment-upload.cjs`),p=require(`./git-control-bar.cjs`);let m=require(`react/jsx-runtime`);function h({onSubmit:h,disabled:g=!1,hasStartedConversation:_}){let{images:v,files:y,imagesMarkedUploadAsFile:b,clearAllFiles:x,subConversationTaskId:S}=r.useConversationStore(),{curAgentState:C}=a.useAgentState(),{data:w}=i.useActiveConversation(),{conversationId:T}=n.useOptionalConversationId(),E=T??w?.id??null,{taskStatus:D}=s.useSubConversationTaskPolling(S,w?.id||null),{handleUpload:O}=f.useChatAttachmentUpload(),k=d.useModelInterceptor(E,u.useGoalInterceptor(E,l.useBtwInterceptor(E,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(v,b);h(e,t,[...y,...n]),x()})));return(0,m.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,m.jsx)(c.CustomChatInput,{disabled:g||C===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(D),isNewConversationPending:g,hasStartedConversation:_,onSubmit:k,onFilesPaste:O}),(0,m.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,m.jsx)(p.GitControlBar,{onSuggestionsClick:e=>{k(e)}})})]})}exports.InteractiveChatBox=h;
 //# sourceMappingURL=interactive-chat-box.cjs.map

package/dist/components/features/chat/interactive-chat-box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-chat-box.cjs","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4yBAoBA,SAAgB,EAAmB,CACjC,WACA,WAAW,IACe,CAC1B,GAAM,CACJ,SACA,QACA,2BACA,gBACA,yBACE,EAAA,sBAAsB,CACpB,CAAE,iBAAkB,EAAA,eAAe,CACnC,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAE,eAAgB,GAAwB,EAAA,2BAA2B,CACrE,EAAiB,GAAuB,GAAc,IAAM,KAE5D,CAAE,WAAY,GAClB,EAAA,8BACE,EACA,GAAc,IAAM,KACrB,CAEG,CAAE,gBAAiB,EAAA,yBAAyB,CAW5C,EAAe,EAAA,oBAAoB,EADhB,EAAA,mBAAmB,EARpB,EAAA,kBAAkB,EAAiB,GAAY,CACrE,GAAM,CAAE,gBAAe,iBAAkB,EAAA,yBACvC,EACA,EACD,CACD,EAAS,EAAS,EAAe,CAAC,GAAG,EAAO,GAAG,EAAc,CAAC,CAC9D,GAAe,EAE2C,CACH,CAAiB,CAW1E,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,gCAAjB,EACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,SAPJ,GACA,IAAkB,EAAA,WAAW,4BAC7B,EAAA,cAAc,EAA0B,CAMpC,yBAA0B,EAC1B,SAAU,EACV,aAAc,EACd,CAAA,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,mBAlBW,GAAuB,CACrD,EAAa,EAAW,EAiByC,CAAA,CACzD,CAAA,CACF"}
+{"version":3,"file":"interactive-chat-box.cjs","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n  hasStartedConversation?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n  hasStartedConversation,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        hasStartedConversation={hasStartedConversation}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4yBAqBA,SAAgB,EAAmB,CACjC,WACA,WAAW,GACX,0BAC0B,CAC1B,GAAM,CACJ,SACA,QACA,2BACA,gBACA,yBACE,EAAA,sBAAsB,CACpB,CAAE,iBAAkB,EAAA,eAAe,CACnC,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAE,eAAgB,GAAwB,EAAA,2BAA2B,CACrE,EAAiB,GAAuB,GAAc,IAAM,KAE5D,CAAE,WAAY,GAClB,EAAA,8BACE,EACA,GAAc,IAAM,KACrB,CAEG,CAAE,gBAAiB,EAAA,yBAAyB,CAW5C,EAAe,EAAA,oBAAoB,EADhB,EAAA,mBAAmB,EARpB,EAAA,kBAAkB,EAAiB,GAAY,CACrE,GAAM,CAAE,gBAAe,iBAAkB,EAAA,yBACvC,EACA,EACD,CACD,EAAS,EAAS,EAAe,CAAC,GAAG,EAAO,GAAG,EAAc,CAAC,CAC9D,GAAe,EAE2C,CACH,CAAiB,CAW1E,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,gCAAjB,EACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,SAPJ,GACA,IAAkB,EAAA,WAAW,4BAC7B,EAAA,cAAc,EAA0B,CAMpC,yBAA0B,EACF,yBACxB,SAAU,EACV,aAAc,EACd,CAAA,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,mBAnBW,GAAuB,CACrD,EAAa,EAAW,EAkByC,CAAA,CACzD,CAAA,CACF"}

package/dist/components/features/chat/interactive-chat-box.d.ts

@@ -1,6 +1,7 @@
 interface InteractiveChatBoxProps {
     onSubmit: (message: string, images: File[], files: File[]) => void;
     disabled?: boolean;
+    hasStartedConversation?: boolean;
 }
-export declare function InteractiveChatBox({ onSubmit, disabled, }: InteractiveChatBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractiveChatBox({ onSubmit, disabled, hasStartedConversation, }: InteractiveChatBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/chat/interactive-chat-box.js

@@ -14,22 +14,23 @@ import { useChatAttachmentUpload as f } from "../../../hooks/chat/use-chat-attac
 import { GitControlBar as p } from "./git-control-bar.js";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/features/chat/interactive-chat-box.tsx
-function g({ onSubmit: g, disabled: _ = !1 }) {
-	let { images: v, files: y, imagesMarkedUploadAsFile: b, clearAllFiles: x, subConversationTaskId: S } = r(), { curAgentState: C } = a(), { data: w } = i(), { conversationId: T } = n(), E = T ?? w?.id ?? null, { taskStatus: D } = s(S, w?.id || null), { handleUpload: O } = f(), k = d(E, u(E, l(E, (e) => {
-		let { imagesToEmbed: t, imagesAsFiles: n } = o(v, b);
-		g(e, t, [...y, ...n]), x();
+function g({ onSubmit: g, disabled: _ = !1, hasStartedConversation: v }) {
+	let { images: y, files: b, imagesMarkedUploadAsFile: x, clearAllFiles: S, subConversationTaskId: C } = r(), { curAgentState: w } = a(), { data: T } = i(), { conversationId: E } = n(), D = E ?? T?.id ?? null, { taskStatus: O } = s(C, T?.id || null), { handleUpload: k } = f(), A = d(D, u(D, l(D, (e) => {
+		let { imagesToEmbed: t, imagesAsFiles: n } = o(y, x);
+		g(e, t, [...b, ...n]), S();
 	})));
 	return /* @__PURE__ */ h("div", {
 		"data-testid": "interactive-chat-box",
 		children: [/* @__PURE__ */ m(c, {
-			disabled: _ || C === e.AWAITING_USER_CONFIRMATION || t(D),
+			disabled: _ || w === e.AWAITING_USER_CONFIRMATION || t(O),
 			isNewConversationPending: _,
-			onSubmit: k,
-			onFilesPaste: O
+			hasStartedConversation: v,
+			onSubmit: A,
+			onFilesPaste: k
 		}), /* @__PURE__ */ m("div", {
 			className: "mt-3 pb-3",
 			children: /* @__PURE__ */ m(p, { onSuggestionsClick: (e) => {
-				k(e);
+				A(e);
 			} })
 		})]
 	});

package/dist/components/features/chat/interactive-chat-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-chat-box.js","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,SAAgB,EAAmB,EACjC,aACA,cAAW,MACe;CAC1B,IAAM,EACJ,WACA,UACA,6BACA,kBACA,6BACE,GAAsB,EACpB,EAAE,qBAAkB,GAAe,EACnC,EAAE,MAAM,MAAiB,GAAuB,EAChD,EAAE,gBAAgB,MAAwB,GAA2B,EACrE,IAAiB,KAAuB,GAAc,MAAM,MAE5D,EAAE,YAAY,MAClB,EACE,GACA,GAAc,MAAM,KACrB,EAEG,EAAE,oBAAiB,GAAyB,EAW5C,IAAe,EAAoB,GADhB,EAAmB,GARpB,EAAkB,IAAiB,MAAY;EACrE,IAAM,EAAE,kBAAe,qBAAkB,EACvC,GACA,EACD;AAED,EADA,EAAS,GAAS,GAAe,CAAC,GAAG,GAAO,GAAG,EAAc,CAAC,EAC9D,GAAe;GAE2C,CACH,CAAiB;AAW1E,QACE,kBAAC,OAAD;EAAK,eAAY;YAAjB,CACE,kBAAC,GAAD;GACE,UAPJ,KACA,MAAkB,EAAW,8BAC7B,EAAc,EAA0B;GAMpC,0BAA0B;GAC1B,UAAU;GACV,cAAc;GACd,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAe,qBAlBW,MAAuB;AACrD,MAAa,EAAW;MAiByC,CAAA;GACzD,CAAA,CACF"}
+{"version":3,"file":"interactive-chat-box.js","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n  hasStartedConversation?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n  hasStartedConversation,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        hasStartedConversation={hasStartedConversation}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,SAAgB,EAAmB,EACjC,aACA,cAAW,IACX,6BAC0B;CAC1B,IAAM,EACJ,WACA,UACA,6BACA,kBACA,6BACE,GAAsB,EACpB,EAAE,qBAAkB,GAAe,EACnC,EAAE,MAAM,MAAiB,GAAuB,EAChD,EAAE,gBAAgB,MAAwB,GAA2B,EACrE,IAAiB,KAAuB,GAAc,MAAM,MAE5D,EAAE,YAAY,MAClB,EACE,GACA,GAAc,MAAM,KACrB,EAEG,EAAE,oBAAiB,GAAyB,EAW5C,IAAe,EAAoB,GADhB,EAAmB,GARpB,EAAkB,IAAiB,MAAY;EACrE,IAAM,EAAE,kBAAe,qBAAkB,EACvC,GACA,EACD;AAED,EADA,EAAS,GAAS,GAAe,CAAC,GAAG,GAAO,GAAG,EAAc,CAAC,EAC9D,GAAe;GAE2C,CACH,CAAiB;AAW1E,QACE,kBAAC,OAAD;EAAK,eAAY;YAAjB,CACE,kBAAC,GAAD;GACE,UAPJ,KACA,MAAkB,EAAW,8BAC7B,EAAc,EAA0B;GAMpC,0BAA0B;GACF;GACxB,UAAU;GACV,cAAc;GACd,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAe,qBAnBW,MAAuB;AACrD,MAAa,EAAW;MAkByC,CAAA;GACzD,CAAA,CACF"}

package/dist/components/features/diff-viewer/commit-list.cjs

@@ -0,0 +1,2 @@
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`./commit-row.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o({commits:e,hasMore:o}){let{t:s}=t.useTranslation(`openhands`),[c,l]=i.default.useState(null),u=new Set(e.map(e=>e.author)).size>1;return(0,a.jsxs)(`section`,{"data-testid":`commit-list`,className:`w-full flex flex-col`,children:[e.map(e=>(0,a.jsx)(r.CommitRow,{commit:e,showAuthor:u,isExpanded:c===e.sha,onToggle:()=>l(t=>t===e.sha?null:e.sha)},e.sha)),o&&(0,a.jsx)(`div`,{"data-testid":`commit-list-cap-notice`,className:`px-3 py-2.5 text-xs text-[var(--oh-muted)]`,children:s(n.I18nKey.DIFF_VIEWER$COMMITS_CAP,{count:e.length})})]})}exports.CommitList=o;
+//# sourceMappingURL=commit-list.cjs.map

package/dist/components/features/diff-viewer/commit-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"commit-list.cjs","names":[],"sources":["../../../../src/components/features/diff-viewer/commit-list.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { GitCommit } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { CommitRow } from \"./commit-row\";\n\nexport interface CommitListProps {\n  commits: GitCommit[];\n  /** True when the server capped the page — surfaces the cap notice. */\n  hasMore: boolean;\n}\n\n/**\n * The workspace's recent commit history (newest first). Single-open\n * accordion: expanding a commit collapses the previously expanded one.\n * Empty/loading/waiting states are the host view's job\n * (see routes/commits-tab.tsx).\n */\nexport function CommitList({ commits, hasMore }: CommitListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [expandedSha, setExpandedSha] = React.useState<string | null>(null);\n\n  // Author is noise when every commit has the same one (the usual\n  // single-agent conversation); show it only when authors differ.\n  const showAuthor = new Set(commits.map((commit) => commit.author)).size > 1;\n\n  return (\n    <section data-testid=\"commit-list\" className=\"w-full flex flex-col\">\n      {commits.map((commit) => (\n        <CommitRow\n          key={commit.sha}\n          commit={commit}\n          showAuthor={showAuthor}\n          isExpanded={expandedSha === commit.sha}\n          onToggle={() =>\n            setExpandedSha((prev) => (prev === commit.sha ? null : commit.sha))\n          }\n        />\n      ))}\n\n      {hasMore && (\n        <div\n          data-testid=\"commit-list-cap-notice\"\n          className=\"px-3 py-2.5 text-xs text-[var(--oh-muted)]\"\n        >\n          {t(I18nKey.DIFF_VIEWER$COMMITS_CAP, { count: commits.length })}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"2RAkBA,SAAgB,EAAW,CAAE,UAAS,WAA4B,CAChE,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAwB,KAAK,CAInE,EAAa,IAAI,IAAI,EAAQ,IAAK,GAAW,EAAO,OAAO,CAAC,CAAC,KAAO,EAE1E,OACE,EAAA,EAAA,MAAC,UAAD,CAAS,cAAY,cAAc,UAAU,gCAA7C,CACG,EAAQ,IAAK,IACZ,EAAA,EAAA,KAAC,EAAA,UAAD,CAEU,SACI,aACZ,WAAY,IAAgB,EAAO,IACnC,aACE,EAAgB,GAAU,IAAS,EAAO,IAAM,KAAO,EAAO,IAAK,CAErE,CAPK,EAAO,IAOZ,CACF,CAED,IACC,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,yBACZ,UAAU,sDAET,EAAE,EAAA,QAAQ,wBAAyB,CAAE,MAAO,EAAQ,OAAQ,CAAC,CAC1D,CAAA,CAEA"}

package/dist/components/features/diff-viewer/commit-list.d.ts

@@ -0,0 +1,13 @@
+import { GitCommit } from "#/api/open-hands.types";
+export interface CommitListProps {
+    commits: GitCommit[];
+    /** True when the server capped the page — surfaces the cap notice. */
+    hasMore: boolean;
+}
+/**
+ * The workspace's recent commit history (newest first). Single-open
+ * accordion: expanding a commit collapses the previously expanded one.
+ * Empty/loading/waiting states are the host view's job
+ * (see routes/commits-tab.tsx).
+ */
+export declare function CommitList({ commits, hasMore }: CommitListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/diff-viewer/commit-list.js

@@ -0,0 +1,27 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { CommitRow as n } from "./commit-row.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/features/diff-viewer/commit-list.tsx
+function o({ commits: o, hasMore: s }) {
+	let { t: c } = e("openhands"), [l, u] = r.useState(null), d = new Set(o.map((e) => e.author)).size > 1;
+	return /* @__PURE__ */ a("section", {
+		"data-testid": "commit-list",
+		className: "w-full flex flex-col",
+		children: [o.map((e) => /* @__PURE__ */ i(n, {
+			commit: e,
+			showAuthor: d,
+			isExpanded: l === e.sha,
+			onToggle: () => u((t) => t === e.sha ? null : e.sha)
+		}, e.sha)), s && /* @__PURE__ */ i("div", {
+			"data-testid": "commit-list-cap-notice",
+			className: "px-3 py-2.5 text-xs text-[var(--oh-muted)]",
+			children: c(t.DIFF_VIEWER$COMMITS_CAP, { count: o.length })
+		})]
+	});
+}
+//#endregion
+export { o as CommitList };
+
+//# sourceMappingURL=commit-list.js.map

package/dist/components/features/diff-viewer/commit-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commit-list.js","names":[],"sources":["../../../../src/components/features/diff-viewer/commit-list.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { GitCommit } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { CommitRow } from \"./commit-row\";\n\nexport interface CommitListProps {\n  commits: GitCommit[];\n  /** True when the server capped the page — surfaces the cap notice. */\n  hasMore: boolean;\n}\n\n/**\n * The workspace's recent commit history (newest first). Single-open\n * accordion: expanding a commit collapses the previously expanded one.\n * Empty/loading/waiting states are the host view's job\n * (see routes/commits-tab.tsx).\n */\nexport function CommitList({ commits, hasMore }: CommitListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [expandedSha, setExpandedSha] = React.useState<string | null>(null);\n\n  // Author is noise when every commit has the same one (the usual\n  // single-agent conversation); show it only when authors differ.\n  const showAuthor = new Set(commits.map((commit) => commit.author)).size > 1;\n\n  return (\n    <section data-testid=\"commit-list\" className=\"w-full flex flex-col\">\n      {commits.map((commit) => (\n        <CommitRow\n          key={commit.sha}\n          commit={commit}\n          showAuthor={showAuthor}\n          isExpanded={expandedSha === commit.sha}\n          onToggle={() =>\n            setExpandedSha((prev) => (prev === commit.sha ? null : commit.sha))\n          }\n        />\n      ))}\n\n      {hasMore && (\n        <div\n          data-testid=\"commit-list-cap-notice\"\n          className=\"px-3 py-2.5 text-xs text-[var(--oh-muted)]\"\n        >\n          {t(I18nKey.DIFF_VIEWER$COMMITS_CAP, { count: commits.length })}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,EAAW,EAAE,YAAS,cAA4B;CAChE,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,CAAC,GAAa,KAAkB,EAAM,SAAwB,KAAK,EAInE,IAAa,IAAI,IAAI,EAAQ,KAAK,MAAW,EAAO,OAAO,CAAC,CAAC,OAAO;AAE1E,QACE,kBAAC,WAAD;EAAS,eAAY;EAAc,WAAU;YAA7C,CACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEU;GACI;GACZ,YAAY,MAAgB,EAAO;GACnC,gBACE,GAAgB,MAAU,MAAS,EAAO,MAAM,OAAO,EAAO,IAAK;GAErE,EAPK,EAAO,IAOZ,CACF,EAED,KACC,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAET,EAAE,EAAQ,yBAAyB,EAAE,OAAO,EAAQ,QAAQ,CAAC;GAC1D,CAAA,CAEA"}

package/dist/components/features/diff-viewer/commit-row.cjs

@@ -0,0 +1,2 @@
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../utils/format-time-delta.cjs`),a=require(`../../../icons/chveron-up.cjs`),o=require(`./loading-spinner.cjs`),s=require(`./file-diff-viewer.cjs`),c=require(`../../../hooks/query/use-commit-changes.cjs`);let l=require(`react`);l=e.__toESM(l,1);let u=require(`react/jsx-runtime`);function d({commit:e,showAuthor:l,isExpanded:d,onToggle:f}){let{t:p}=t.useTranslation(`openhands`),{data:m,isLoading:h,isSuccess:g}=c.useCommitChanges(e.sha,{enabled:d});return(0,u.jsxs)(`div`,{"data-testid":`commit-row`,className:`w-full flex flex-col`,children:[(0,u.jsxs)(`button`,{type:`button`,onClick:f,"aria-expanded":d,"data-testid":`commit-row-toggle`,className:`w-full flex items-center gap-2 px-3 py-2.5 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer`,children:[(0,u.jsx)(`code`,{className:`font-mono text-xs text-[var(--oh-muted)] flex-shrink-0`,children:e.shortSha}),(0,u.jsx)(`strong`,{className:`flex-1 truncate font-medium`,children:e.subject}),l&&(0,u.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)] truncate max-w-32 flex-shrink-0`,children:e.author}),(0,u.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)] flex-shrink-0`,children:`${i.formatTimeDelta(e.timestamp)} ${p(n.I18nKey.CONVERSATION$AGO)}`}),(0,u.jsx)(a.default,{className:r.cn(`w-4 h-4 transition-transform flex-shrink-0`,!d&&`transform rotate-180`)})]}),d&&(0,u.jsxs)(`div`,{"data-testid":`commit-row-content`,className:`w-full flex flex-col pl-6`,children:[h&&(0,u.jsx)(`div`,{className:`p-3`,children:(0,u.jsx)(o.LoadingSpinner,{className:`w-4 h-4`})}),g&&m?.map(t=>(0,u.jsx)(s.FileDiffViewer,{path:t.path,type:t.status,commit:e.sha},t.path))]})]})}exports.CommitRow=d;
+//# sourceMappingURL=commit-row.cjs.map

package/dist/components/features/diff-viewer/commit-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"commit-row.cjs","names":[],"sources":["../../../../src/components/features/diff-viewer/commit-row.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { GitCommit } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { formatTimeDelta } from \"#/utils/format-time-delta\";\nimport ChevronUp from \"#/icons/chveron-up.svg?react\";\nimport { useCommitChanges } from \"#/hooks/query/use-commit-changes\";\nimport { FileDiffViewer } from \"./file-diff-viewer\";\nimport { LoadingSpinner } from \"./loading-spinner\";\n\nexport interface CommitRowProps {\n  commit: GitCommit;\n  /** Only shown when the listed commits have more than one author. */\n  showAuthor: boolean;\n  isExpanded: boolean;\n  onToggle: () => void;\n}\n\n/**\n * One collapsible commit: header row (short SHA, subject, relative time),\n * expanding into the files that commit changed, each rendered with the\n * regular FileDiffViewer in per-commit mode.\n */\nexport function CommitRow({\n  commit,\n  showAuthor,\n  isExpanded,\n  onToggle,\n}: CommitRowProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Only fetch a commit's file list once the row is expanded.\n  const {\n    data: changes,\n    isLoading,\n    isSuccess,\n  } = useCommitChanges(commit.sha, { enabled: isExpanded });\n\n  return (\n    <div data-testid=\"commit-row\" className=\"w-full flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={isExpanded}\n        data-testid=\"commit-row-toggle\"\n        className=\"w-full flex items-center gap-2 px-3 py-2.5 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer\"\n      >\n        <code className=\"font-mono text-xs text-[var(--oh-muted)] flex-shrink-0\">\n          {commit.shortSha}\n        </code>\n        <strong className=\"flex-1 truncate font-medium\">\n          {commit.subject}\n        </strong>\n        {showAuthor && (\n          <span className=\"text-xs text-[var(--oh-muted)] truncate max-w-32 flex-shrink-0\">\n            {commit.author}\n          </span>\n        )}\n        <span className=\"text-xs text-[var(--oh-muted)] flex-shrink-0\">\n          {`${formatTimeDelta(commit.timestamp)} ${t(I18nKey.CONVERSATION$AGO)}`}\n        </span>\n        <ChevronUp\n          className={cn(\n            \"w-4 h-4 transition-transform flex-shrink-0\",\n            !isExpanded && \"transform rotate-180\",\n          )}\n        />\n      </button>\n\n      {isExpanded && (\n        <div\n          data-testid=\"commit-row-content\"\n          className=\"w-full flex flex-col pl-6\"\n        >\n          {isLoading && (\n            <div className=\"p-3\">\n              <LoadingSpinner className=\"w-4 h-4\" />\n            </div>\n          )}\n          {isSuccess &&\n            changes?.map((change) => (\n              <FileDiffViewer\n                key={change.path}\n                path={change.path}\n                type={change.status}\n                commit={commit.sha}\n              />\n            ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"ggBAwBA,SAAgB,EAAU,CACxB,SACA,aACA,aACA,YACiB,CACjB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAGnC,CACJ,KAAM,EACN,YACA,aACE,EAAA,iBAAiB,EAAO,IAAK,CAAE,QAAS,EAAY,CAAC,CAEzD,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,aAAa,UAAU,gCAAxC,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,gBAAe,EACf,cAAY,oBACZ,UAAU,6IALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kEACb,EAAO,SACH,CAAA,EACP,EAAA,EAAA,KAAC,SAAD,CAAQ,UAAU,uCACf,EAAO,QACD,CAAA,CACR,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0EACb,EAAO,OACH,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,wDACb,GAAG,EAAA,gBAAgB,EAAO,UAAU,CAAC,GAAG,EAAE,EAAA,QAAQ,iBAAiB,GAC/D,CAAA,EACP,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,6CACA,CAAC,GAAc,uBAChB,CACD,CAAA,CACK,GAER,IACC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qBACZ,UAAU,qCAFZ,CAIG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gBACb,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,UAAU,UAAY,CAAA,CAClC,CAAA,CAEP,GACC,GAAS,IAAK,IACZ,EAAA,EAAA,KAAC,EAAA,eAAD,CAEE,KAAM,EAAO,KACb,KAAM,EAAO,OACb,OAAQ,EAAO,IACf,CAJK,EAAO,KAIZ,CACF,CACA,GAEJ"}

package/dist/components/features/diff-viewer/commit-row.d.ts

@@ -0,0 +1,14 @@
+import { GitCommit } from "#/api/open-hands.types";
+export interface CommitRowProps {
+    commit: GitCommit;
+    /** Only shown when the listed commits have more than one author. */
+    showAuthor: boolean;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+/**
+ * One collapsible commit: header row (short SHA, subject, relative time),
+ * expanding into the files that commit changed, each rendered with the
+ * regular FileDiffViewer in per-commit mode.
+ */
+export declare function CommitRow({ commit, showAuthor, isExpanded, onToggle, }: CommitRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/diff-viewer/commit-row.js

@@ -0,0 +1,59 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { formatTimeDelta as r } from "../../../utils/format-time-delta.js";
+import i from "../../../icons/chveron-up.js";
+import { LoadingSpinner as a } from "./loading-spinner.js";
+import { FileDiffViewer as o } from "./file-diff-viewer.js";
+import { useCommitChanges as s } from "../../../hooks/query/use-commit-changes.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/features/diff-viewer/commit-row.tsx
+function u({ commit: u, showAuthor: d, isExpanded: f, onToggle: p }) {
+	let { t: m } = e("openhands"), { data: h, isLoading: g, isSuccess: _ } = s(u.sha, { enabled: f });
+	return /* @__PURE__ */ l("div", {
+		"data-testid": "commit-row",
+		className: "w-full flex flex-col",
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: p,
+			"aria-expanded": f,
+			"data-testid": "commit-row-toggle",
+			className: "w-full flex items-center gap-2 px-3 py-2.5 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer",
+			children: [
+				/* @__PURE__ */ c("code", {
+					className: "font-mono text-xs text-[var(--oh-muted)] flex-shrink-0",
+					children: u.shortSha
+				}),
+				/* @__PURE__ */ c("strong", {
+					className: "flex-1 truncate font-medium",
+					children: u.subject
+				}),
+				d && /* @__PURE__ */ c("span", {
+					className: "text-xs text-[var(--oh-muted)] truncate max-w-32 flex-shrink-0",
+					children: u.author
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "text-xs text-[var(--oh-muted)] flex-shrink-0",
+					children: `${r(u.timestamp)} ${m(t.CONVERSATION$AGO)}`
+				}),
+				/* @__PURE__ */ c(i, { className: n("w-4 h-4 transition-transform flex-shrink-0", !f && "transform rotate-180") })
+			]
+		}), f && /* @__PURE__ */ l("div", {
+			"data-testid": "commit-row-content",
+			className: "w-full flex flex-col pl-6",
+			children: [g && /* @__PURE__ */ c("div", {
+				className: "p-3",
+				children: /* @__PURE__ */ c(a, { className: "w-4 h-4" })
+			}), _ && h?.map((e) => /* @__PURE__ */ c(o, {
+				path: e.path,
+				type: e.status,
+				commit: u.sha
+			}, e.path))]
+		})]
+	});
+}
+//#endregion
+export { u as CommitRow };
+
+//# sourceMappingURL=commit-row.js.map

package/dist/components/features/diff-viewer/commit-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commit-row.js","names":[],"sources":["../../../../src/components/features/diff-viewer/commit-row.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { GitCommit } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { formatTimeDelta } from \"#/utils/format-time-delta\";\nimport ChevronUp from \"#/icons/chveron-up.svg?react\";\nimport { useCommitChanges } from \"#/hooks/query/use-commit-changes\";\nimport { FileDiffViewer } from \"./file-diff-viewer\";\nimport { LoadingSpinner } from \"./loading-spinner\";\n\nexport interface CommitRowProps {\n  commit: GitCommit;\n  /** Only shown when the listed commits have more than one author. */\n  showAuthor: boolean;\n  isExpanded: boolean;\n  onToggle: () => void;\n}\n\n/**\n * One collapsible commit: header row (short SHA, subject, relative time),\n * expanding into the files that commit changed, each rendered with the\n * regular FileDiffViewer in per-commit mode.\n */\nexport function CommitRow({\n  commit,\n  showAuthor,\n  isExpanded,\n  onToggle,\n}: CommitRowProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Only fetch a commit's file list once the row is expanded.\n  const {\n    data: changes,\n    isLoading,\n    isSuccess,\n  } = useCommitChanges(commit.sha, { enabled: isExpanded });\n\n  return (\n    <div data-testid=\"commit-row\" className=\"w-full flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={isExpanded}\n        data-testid=\"commit-row-toggle\"\n        className=\"w-full flex items-center gap-2 px-3 py-2.5 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer\"\n      >\n        <code className=\"font-mono text-xs text-[var(--oh-muted)] flex-shrink-0\">\n          {commit.shortSha}\n        </code>\n        <strong className=\"flex-1 truncate font-medium\">\n          {commit.subject}\n        </strong>\n        {showAuthor && (\n          <span className=\"text-xs text-[var(--oh-muted)] truncate max-w-32 flex-shrink-0\">\n            {commit.author}\n          </span>\n        )}\n        <span className=\"text-xs text-[var(--oh-muted)] flex-shrink-0\">\n          {`${formatTimeDelta(commit.timestamp)} ${t(I18nKey.CONVERSATION$AGO)}`}\n        </span>\n        <ChevronUp\n          className={cn(\n            \"w-4 h-4 transition-transform flex-shrink-0\",\n            !isExpanded && \"transform rotate-180\",\n          )}\n        />\n      </button>\n\n      {isExpanded && (\n        <div\n          data-testid=\"commit-row-content\"\n          className=\"w-full flex flex-col pl-6\"\n        >\n          {isLoading && (\n            <div className=\"p-3\">\n              <LoadingSpinner className=\"w-4 h-4\" />\n            </div>\n          )}\n          {isSuccess &&\n            changes?.map((change) => (\n              <FileDiffViewer\n                key={change.path}\n                path={change.path}\n                type={change.status}\n                commit={commit.sha}\n              />\n            ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAgB,EAAU,EACxB,WACA,eACA,eACA,eACiB;CACjB,IAAM,EAAE,SAAM,EAAe,YAAY,EAGnC,EACJ,MAAM,GACN,cACA,iBACE,EAAiB,EAAO,KAAK,EAAE,SAAS,GAAY,CAAC;AAEzD,QACE,kBAAC,OAAD;EAAK,eAAY;EAAa,WAAU;YAAxC,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,iBAAe;GACf,eAAY;GACZ,WAAU;aALZ;IAOE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO;KACH,CAAA;IACP,kBAAC,UAAD;KAAQ,WAAU;eACf,EAAO;KACD,CAAA;IACR,KACC,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO;KACH,CAAA;IAET,kBAAC,QAAD;KAAM,WAAU;eACb,GAAG,EAAgB,EAAO,UAAU,CAAC,GAAG,EAAE,EAAQ,iBAAiB;KAC/D,CAAA;IACP,kBAAC,GAAD,EACE,WAAW,EACT,8CACA,CAAC,KAAc,uBAChB,EACD,CAAA;IACK;MAER,KACC,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ,CAIG,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA;IAClC,CAAA,EAEP,KACC,GAAS,KAAK,MACZ,kBAAC,GAAD;IAEE,MAAM,EAAO;IACb,MAAM,EAAO;IACb,QAAQ,EAAO;IACf,EAJK,EAAO,KAIZ,CACF,CACA;KAEJ"}

package/dist/components/features/diff-viewer/file-diff-viewer.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../markdown/markdown-renderer.cjs`),a=require(`../../../ui/typography.cjs`),o=require(`../../../utils/get-language-from-path.cjs`),s=require(`../../../node_modules/@monaco-editor/react/dist/index.cjs`),c=require(`../../../node_modules/react-icons/lu/index.cjs`),l=require(`../../../icons/chveron-up.cjs`),u=require(`../../../hooks/query/use-unified-git-diff.cjs`),d=require(`./loading-spinner.cjs`),f=require(`./editor-container.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);var h=[{mode:`old`,icon:c.LuHistory},{mode:`diff`,icon:c.LuGitCompareArrows},{mode:`new`,icon:c.LuFileCheck}],g={renderValidationDecorations:`off`,readOnly:!0,scrollBeyondLastLine:!1,minimap:{enabled:!1},automaticLayout:!0,scrollbar:{alwaysConsumeMouseWheel:!1}},_={A:c.LuFilePlus,D:c.LuFileMinus,M:c.LuFileDiff,R:`Renamed`,U:`Untracked`},v=e=>{e.editor.defineTheme(`custom-diff-theme`,{base:`vs-dark`,inherit:!0,rules:[{token:`comment`,foreground:`6a9955`},{token:`keyword`,foreground:`569cd6`},{token:`string`,foreground:`ce9178`},{token:`number`,foreground:`b5cea8`}],colors:{"diffEditor.insertedTextBackground":`#014b01AA`,"diffEditor.removedTextBackground":`#750000AA`,"diffEditor.insertedLineBackground":`#003f00AA`,"diffEditor.removedLineBackground":`#5a0000AA`,"diffEditor.border":`var(--oh-border-subtle)`,"editorUnnecessaryCode.border":`#00000000`,"editorUnnecessaryCode.opacity":`rgba(0, 0, 0, 0.467)`}})};function y({path:e,type:c}){let{t:y}=t.useTranslation(`openhands`),[b,x]=p.default.useState(!0),[S,C]=p.default.useState(400),[w,T]=p.default.useState(`diff`),E=p.default.useRef(null),D=p.default.useRef(null),O=c===`A`||c===`U`,k=c===`D`,A=p.default.useMemo(()=>{if(c===`R`){let t=e.split(/\s+/).slice(1);return t[t.length-1]}return e},[e,c]),{data:j,isLoading:M,isSuccess:N,isRefetching:P}=u.useUnifiedGitDiff({filePath:A,type:c,enabled:!b}),F=p.default.useCallback(()=>{if(!E.current)return;let e=E.current.getOriginalEditor(),t=E.current.getModifiedEditor();e&&t&&C(Math.max(e.getContentHeight(),t.getContentHeight())+20)},[]),I=p.default.useCallback(()=>{D.current&&C(D.current.getContentHeight()+20)},[]),L=e=>{E.current=e,F(),e.getOriginalEditor().onDidContentSizeChange(F),e.getModifiedEditor().onDidContentSizeChange(F)},R=e=>{D.current=e,I(),e.onDidContentSizeChange(I)},z=(c===`U`?_.A:_[c])||`?`,B=typeof z==`string`?(0,m.jsx)(a.Typography.Text,{children:z}):p.default.createElement(z,{className:`w-5 h-5`}),V=M||P,H=o.getLanguageFromPath(A),U=H===`markdown`,W=w===`old`?j?.original??``:j?.modified??``;return(0,m.jsxs)(`div`,{"data-testid":`file-diff-viewer-outer`,className:`w-full flex flex-col`,children:[(0,m.jsx)(`div`,{className:`flex justify-between items-center px-3 py-2.5 border-b border-[var(--oh-border)] hover:cursor-pointer`,onClick:()=>x(e=>!e),children:(0,m.jsxs)(`span`,{className:`text-sm w-full text-content flex items-center gap-2`,children:[V?(0,m.jsx)(d.LoadingSpinner,{className:`w-4 h-4`}):B,(0,m.jsx)(`strong`,{className:`w-full truncate font-medium`,children:A}),!b&&!k&&(0,m.jsx)(`span`,{className:`flex items-center gap-0.5 shrink-0`,onClick:e=>e.stopPropagation(),children:h.map(({mode:e,icon:t})=>(0,m.jsx)(`button`,{"data-testid":`view-mode-${e}`,type:`button`,"aria-pressed":w===e,onClick:()=>T(e),className:r.cn(`p-1 rounded transition-colors cursor-pointer`,w===e?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-white`),children:(0,m.jsx)(t,{className:`w-4 h-4`})},e))}),(0,m.jsx)(`button`,{"data-testid":`collapse`,type:`button`,children:(0,m.jsx)(l.default,{className:r.cn(`w-4 h-4 transition-transform`,b&&`transform rotate-180`)})})]})}),!b&&k&&(0,m.jsx)(`div`,{"data-testid":`file-deleted-message`,className:`w-full border-b border-[var(--oh-border)] p-4 bg-base text-[var(--oh-text-dim)] text-sm`,children:y(n.I18nKey.DIFF_VIEWER$FILE_DELETED)}),!b&&!k&&N&&(w===`diff`?(0,m.jsx)(f.EditorContainer,{height:S,children:(0,m.jsx)(s.we,{"data-testid":`file-diff-viewer`,className:`w-full h-full`,language:H,original:O?``:j?.original??``,modified:k?``:j?.modified??``,theme:`custom-diff-theme`,onMount:L,beforeMount:v,options:{...g,renderSideBySide:!O&&!k,hideUnchangedRegions:{enabled:!0}}})}):U?(0,m.jsx)(`div`,{className:`w-full border-b border-[var(--oh-border)] overflow-auto p-4 bg-base prose prose-invert max-w-none`,"data-testid":`markdown-preview`,children:(0,m.jsx)(i.MarkdownRenderer,{content:W,includeStandard:!0,includeHeadings:!0})}):(0,m.jsx)(f.EditorContainer,{height:S,children:(0,m.jsx)(s.de,{"data-testid":`file-single-viewer`,className:`w-full h-full`,language:H,value:W,theme:`custom-diff-theme`,beforeMount:v,onMount:R,options:g})}))]})}exports.FileDiffViewer=y;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../markdown/markdown-renderer.cjs`),a=require(`../../../ui/typography.cjs`),o=require(`../../../utils/get-language-from-path.cjs`),s=require(`../../../node_modules/@monaco-editor/react/dist/index.cjs`),c=require(`../../../node_modules/react-icons/lu/index.cjs`),l=require(`../../../icons/chveron-up.cjs`),u=require(`../../../hooks/query/use-unified-git-diff.cjs`),d=require(`./loading-spinner.cjs`),f=require(`./editor-container.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);var h=[{mode:`old`,icon:c.LuHistory},{mode:`diff`,icon:c.LuGitCompareArrows},{mode:`new`,icon:c.LuFileCheck}],g={renderValidationDecorations:`off`,readOnly:!0,scrollBeyondLastLine:!1,minimap:{enabled:!1},automaticLayout:!0,scrollbar:{alwaysConsumeMouseWheel:!1}},_={A:c.LuFilePlus,D:c.LuFileMinus,M:c.LuFileDiff,R:`Renamed`,U:`Untracked`},v=e=>{e.editor.defineTheme(`custom-diff-theme`,{base:`vs-dark`,inherit:!0,rules:[{token:`comment`,foreground:`6a9955`},{token:`keyword`,foreground:`569cd6`},{token:`string`,foreground:`ce9178`},{token:`number`,foreground:`b5cea8`}],colors:{"diffEditor.insertedTextBackground":`#014b01AA`,"diffEditor.removedTextBackground":`#750000AA`,"diffEditor.insertedLineBackground":`#003f00AA`,"diffEditor.removedLineBackground":`#5a0000AA`,"diffEditor.border":`var(--oh-border-subtle)`,"editorUnnecessaryCode.border":`#00000000`,"editorUnnecessaryCode.opacity":`rgba(0, 0, 0, 0.467)`}})};function y({path:e,type:c,commit:y}){let{t:b}=t.useTranslation(`openhands`),[x,S]=p.default.useState(!0),[C,w]=p.default.useState(400),[T,E]=p.default.useState(`diff`),D=p.default.useRef(null),O=p.default.useRef(null),k=c===`A`||c===`U`,A=c===`D`,j=p.default.useMemo(()=>{if(c===`R`){let t=e.split(/\s+/).slice(1);return t[t.length-1]}return e},[e,c]),{data:M,isLoading:N,isSuccess:P,isRefetching:F}=u.useUnifiedGitDiff({filePath:j,type:c,enabled:!x,commit:y}),I=p.default.useCallback(()=>{if(!D.current)return;let e=D.current.getOriginalEditor(),t=D.current.getModifiedEditor();e&&t&&w(Math.max(e.getContentHeight(),t.getContentHeight())+20)},[]),L=p.default.useCallback(()=>{O.current&&w(O.current.getContentHeight()+20)},[]),R=e=>{D.current=e,I(),e.getOriginalEditor().onDidContentSizeChange(I),e.getModifiedEditor().onDidContentSizeChange(I)},z=e=>{O.current=e,L(),e.onDidContentSizeChange(L)},B=(c===`U`?_.A:_[c])||`?`,V=typeof B==`string`?(0,m.jsx)(a.Typography.Text,{children:B}):p.default.createElement(B,{className:`w-5 h-5`}),H=N||F,U=o.getLanguageFromPath(j),W=U===`markdown`,G=T===`old`?M?.original??``:M?.modified??``;return(0,m.jsxs)(`div`,{"data-testid":`file-diff-viewer-outer`,className:`w-full flex flex-col`,children:[(0,m.jsx)(`div`,{className:`flex justify-between items-center px-3 py-2.5 border-b border-[var(--oh-border)] hover:cursor-pointer`,onClick:()=>S(e=>!e),children:(0,m.jsxs)(`span`,{className:`text-sm w-full text-content flex items-center gap-2`,children:[H?(0,m.jsx)(d.LoadingSpinner,{className:`w-4 h-4`}):V,(0,m.jsx)(`strong`,{className:`w-full truncate font-medium`,children:j}),!x&&!A&&(0,m.jsx)(`span`,{className:`flex items-center gap-0.5 shrink-0`,onClick:e=>e.stopPropagation(),children:h.map(({mode:e,icon:t})=>(0,m.jsx)(`button`,{"data-testid":`view-mode-${e}`,type:`button`,"aria-pressed":T===e,onClick:()=>E(e),className:r.cn(`p-1 rounded transition-colors cursor-pointer`,T===e?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-white`),children:(0,m.jsx)(t,{className:`w-4 h-4`})},e))}),(0,m.jsx)(`button`,{"data-testid":`collapse`,type:`button`,children:(0,m.jsx)(l.default,{className:r.cn(`w-4 h-4 transition-transform`,x&&`transform rotate-180`)})})]})}),!x&&A&&!y&&(0,m.jsx)(`div`,{"data-testid":`file-deleted-message`,className:`w-full border-b border-[var(--oh-border)] p-4 bg-base text-[var(--oh-text-dim)] text-sm`,children:b(n.I18nKey.DIFF_VIEWER$FILE_DELETED)}),!x&&(!A||!!y)&&P&&(T===`diff`?(0,m.jsx)(f.EditorContainer,{height:C,children:(0,m.jsx)(s.we,{"data-testid":`file-diff-viewer`,className:`w-full h-full`,language:U,original:k?``:M?.original??``,modified:A?``:M?.modified??``,theme:`custom-diff-theme`,onMount:R,beforeMount:v,options:{...g,renderSideBySide:!k&&!A,hideUnchangedRegions:{enabled:!0}}})}):W?(0,m.jsx)(`div`,{className:`w-full border-b border-[var(--oh-border)] overflow-auto p-4 bg-base prose prose-invert max-w-none`,"data-testid":`markdown-preview`,children:(0,m.jsx)(i.MarkdownRenderer,{content:G,includeStandard:!0,includeHeadings:!0})}):(0,m.jsx)(f.EditorContainer,{height:C,children:(0,m.jsx)(s.de,{"data-testid":`file-single-viewer`,className:`w-full h-full`,language:U,value:G,theme:`custom-diff-theme`,beforeMount:v,onMount:z,options:g})}))]})}exports.FileDiffViewer=y;
 //# sourceMappingURL=file-diff-viewer.cjs.map

package/dist/components/features/diff-viewer/file-diff-viewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-diff-viewer.cjs","names":[],"sources":["../../../../src/components/features/diff-viewer/file-diff-viewer.tsx"],"sourcesContent":["import { DiffEditor, Editor, Monaco } from \"@monaco-editor/react\";\nimport React from \"react\";\nimport { editor as editor_t } from \"monaco-editor\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  LuFileDiff,\n  LuFileMinus,\n  LuFilePlus,\n  LuHistory,\n  LuGitCompareArrows,\n  LuFileCheck,\n} from \"react-icons/lu\";\nimport { IconType } from \"react-icons/lib\";\nimport { GitChangeStatus } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getLanguageFromPath } from \"#/utils/get-language-from-path\";\nimport { cn } from \"#/utils/utils\";\nimport ChevronUp from \"#/icons/chveron-up.svg?react\";\nimport { useUnifiedGitDiff } from \"#/hooks/query/use-unified-git-diff\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { Typography } from \"#/ui/typography\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { EditorContainer } from \"./editor-container\";\n\ntype ViewMode = \"diff\" | \"old\" | \"new\";\n\nconst VIEW_MODES: { mode: ViewMode; icon: IconType }[] = [\n  { mode: \"old\", icon: LuHistory },\n  { mode: \"diff\", icon: LuGitCompareArrows },\n  { mode: \"new\", icon: LuFileCheck },\n];\n\nconst SHARED_EDITOR_OPTIONS: editor_t.IEditorOptions = {\n  renderValidationDecorations: \"off\",\n  readOnly: true,\n  scrollBeyondLastLine: false,\n  minimap: { enabled: false },\n  automaticLayout: true,\n  scrollbar: { alwaysConsumeMouseWheel: false },\n};\n\nconst STATUS_MAP: Record<GitChangeStatus, string | IconType> = {\n  A: LuFilePlus,\n  D: LuFileMinus,\n  M: LuFileDiff,\n  R: \"Renamed\",\n  U: \"Untracked\",\n};\n\nconst beforeMount = (monaco: Monaco) => {\n  monaco.editor.defineTheme(\"custom-diff-theme\", {\n    base: \"vs-dark\",\n    inherit: true,\n    rules: [\n      { token: \"comment\", foreground: \"6a9955\" },\n      { token: \"keyword\", foreground: \"569cd6\" },\n      { token: \"string\", foreground: \"ce9178\" },\n      { token: \"number\", foreground: \"b5cea8\" },\n    ],\n    colors: {\n      \"diffEditor.insertedTextBackground\": \"#014b01AA\",\n      \"diffEditor.removedTextBackground\": \"#750000AA\",\n      \"diffEditor.insertedLineBackground\": \"#003f00AA\",\n      \"diffEditor.removedLineBackground\": \"#5a0000AA\",\n      \"diffEditor.border\": \"var(--oh-border-subtle)\",\n      \"editorUnnecessaryCode.border\": \"#00000000\",\n      \"editorUnnecessaryCode.opacity\": \"rgba(0, 0, 0, 0.467)\",\n    },\n  });\n};\n\nexport interface FileDiffViewerProps {\n  path: string;\n  type: GitChangeStatus;\n}\n\nexport function FileDiffViewer({ path, type }: FileDiffViewerProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n  const [editorHeight, setEditorHeight] = React.useState(400);\n  const [viewMode, setViewMode] = React.useState<ViewMode>(\"diff\");\n  const diffEditorRef = React.useRef<editor_t.IStandaloneDiffEditor>(null);\n  const singleEditorRef = React.useRef<editor_t.IStandaloneCodeEditor>(null);\n\n  const isAdded = type === \"A\" || type === \"U\";\n  const isDeleted = type === \"D\";\n\n  const filePath = React.useMemo(() => {\n    if (type === \"R\") {\n      const parts = path.split(/\\s+/).slice(1);\n      return parts[parts.length - 1];\n    }\n    return path;\n  }, [path, type]);\n\n  const {\n    data: diff,\n    isLoading,\n    isSuccess,\n    isRefetching,\n  } = useUnifiedGitDiff({\n    filePath,\n    type,\n    enabled: !isCollapsed,\n  });\n\n  const updateEditorHeight = React.useCallback(() => {\n    if (!diffEditorRef.current) return;\n    const originalEditor = diffEditorRef.current.getOriginalEditor();\n    const modifiedEditor = diffEditorRef.current.getModifiedEditor();\n    if (originalEditor && modifiedEditor) {\n      setEditorHeight(\n        Math.max(\n          originalEditor.getContentHeight(),\n          modifiedEditor.getContentHeight(),\n        ) + 20,\n      );\n    }\n  }, []);\n\n  const updateSingleEditorHeight = React.useCallback(() => {\n    if (singleEditorRef.current) {\n      setEditorHeight(singleEditorRef.current.getContentHeight() + 20);\n    }\n  }, []);\n\n  const handleDiffEditorMount = (editor: editor_t.IStandaloneDiffEditor) => {\n    diffEditorRef.current = editor;\n    updateEditorHeight();\n    editor.getOriginalEditor().onDidContentSizeChange(updateEditorHeight);\n    editor.getModifiedEditor().onDidContentSizeChange(updateEditorHeight);\n  };\n\n  const handleSingleEditorMount = (editor: editor_t.IStandaloneCodeEditor) => {\n    singleEditorRef.current = editor;\n    updateSingleEditorHeight();\n    editor.onDidContentSizeChange(updateSingleEditorHeight);\n  };\n\n  const status = (type === \"U\" ? STATUS_MAP.A : STATUS_MAP[type]) || \"?\";\n  const statusIcon =\n    typeof status === \"string\" ? (\n      <Typography.Text>{status}</Typography.Text>\n    ) : (\n      React.createElement(status, { className: \"w-5 h-5\" })\n    );\n\n  const isFetchingData = isLoading || isRefetching;\n  const language = getLanguageFromPath(filePath);\n  const isMarkdownFile = language === \"markdown\";\n  const singleViewContent =\n    viewMode === \"old\" ? (diff?.original ?? \"\") : (diff?.modified ?? \"\");\n\n  const renderContent = () => {\n    if (viewMode === \"diff\") {\n      return (\n        <EditorContainer height={editorHeight}>\n          <DiffEditor\n            data-testid=\"file-diff-viewer\"\n            className=\"w-full h-full\"\n            language={language}\n            original={isAdded ? \"\" : (diff?.original ?? \"\")}\n            modified={isDeleted ? \"\" : (diff?.modified ?? \"\")}\n            theme=\"custom-diff-theme\"\n            onMount={handleDiffEditorMount}\n            beforeMount={beforeMount}\n            options={{\n              ...SHARED_EDITOR_OPTIONS,\n              renderSideBySide: !isAdded && !isDeleted,\n              hideUnchangedRegions: { enabled: true },\n            }}\n          />\n        </EditorContainer>\n      );\n    }\n\n    if (isMarkdownFile) {\n      return (\n        <div\n          className=\"w-full border-b border-[var(--oh-border)] overflow-auto p-4 bg-base prose prose-invert max-w-none\"\n          data-testid=\"markdown-preview\"\n        >\n          <MarkdownRenderer\n            content={singleViewContent}\n            includeStandard\n            includeHeadings\n          />\n        </div>\n      );\n    }\n\n    return (\n      <EditorContainer height={editorHeight}>\n        <Editor\n          data-testid=\"file-single-viewer\"\n          className=\"w-full h-full\"\n          language={language}\n          value={singleViewContent}\n          theme=\"custom-diff-theme\"\n          beforeMount={beforeMount}\n          onMount={handleSingleEditorMount}\n          options={SHARED_EDITOR_OPTIONS}\n        />\n      </EditorContainer>\n    );\n  };\n\n  return (\n    <div data-testid=\"file-diff-viewer-outer\" className=\"w-full flex flex-col\">\n      <div\n        className=\"flex justify-between items-center px-3 py-2.5 border-b border-[var(--oh-border)] hover:cursor-pointer\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        <span className=\"text-sm w-full text-content flex items-center gap-2\">\n          {isFetchingData ? <LoadingSpinner className=\"w-4 h-4\" /> : statusIcon}\n          <strong className=\"w-full truncate font-medium\">{filePath}</strong>\n          {!isCollapsed && !isDeleted && (\n            <span\n              className=\"flex items-center gap-0.5 shrink-0\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              {VIEW_MODES.map(({ mode, icon: Icon }) => (\n                <button\n                  key={mode}\n                  data-testid={`view-mode-${mode}`}\n                  type=\"button\"\n                  aria-pressed={viewMode === mode}\n                  onClick={() => setViewMode(mode)}\n                  className={cn(\n                    \"p-1 rounded transition-colors cursor-pointer\",\n                    viewMode === mode\n                      ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                      : \"text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-white\",\n                  )}\n                >\n                  <Icon className=\"w-4 h-4\" />\n                </button>\n              ))}\n            </span>\n          )}\n          <button data-testid=\"collapse\" type=\"button\">\n            <ChevronUp\n              className={cn(\n                \"w-4 h-4 transition-transform\",\n                isCollapsed && \"transform rotate-180\",\n              )}\n            />\n          </button>\n        </span>\n      </div>\n\n      {!isCollapsed && isDeleted && (\n        <div\n          data-testid=\"file-deleted-message\"\n          className=\"w-full border-b border-[var(--oh-border)] p-4 bg-base text-[var(--oh-text-dim)] text-sm\"\n        >\n          {t(I18nKey.DIFF_VIEWER$FILE_DELETED)}\n        </div>\n      )}\n\n      {!isCollapsed && !isDeleted && isSuccess && renderContent()}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-diff-viewer.cjs","names":[],"sources":["../../../../src/components/features/diff-viewer/file-diff-viewer.tsx"],"sourcesContent":["import { DiffEditor, Editor, Monaco } from \"@monaco-editor/react\";\nimport React from \"react\";\nimport { editor as editor_t } from \"monaco-editor\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  LuFileDiff,\n  LuFileMinus,\n  LuFilePlus,\n  LuHistory,\n  LuGitCompareArrows,\n  LuFileCheck,\n} from \"react-icons/lu\";\nimport { IconType } from \"react-icons/lib\";\nimport { GitChangeStatus } from \"#/api/open-hands.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { getLanguageFromPath } from \"#/utils/get-language-from-path\";\nimport { cn } from \"#/utils/utils\";\nimport ChevronUp from \"#/icons/chveron-up.svg?react\";\nimport { useUnifiedGitDiff } from \"#/hooks/query/use-unified-git-diff\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { Typography } from \"#/ui/typography\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { EditorContainer } from \"./editor-container\";\n\ntype ViewMode = \"diff\" | \"old\" | \"new\";\n\nconst VIEW_MODES: { mode: ViewMode; icon: IconType }[] = [\n  { mode: \"old\", icon: LuHistory },\n  { mode: \"diff\", icon: LuGitCompareArrows },\n  { mode: \"new\", icon: LuFileCheck },\n];\n\nconst SHARED_EDITOR_OPTIONS: editor_t.IEditorOptions = {\n  renderValidationDecorations: \"off\",\n  readOnly: true,\n  scrollBeyondLastLine: false,\n  minimap: { enabled: false },\n  automaticLayout: true,\n  scrollbar: { alwaysConsumeMouseWheel: false },\n};\n\nconst STATUS_MAP: Record<GitChangeStatus, string | IconType> = {\n  A: LuFilePlus,\n  D: LuFileMinus,\n  M: LuFileDiff,\n  R: \"Renamed\",\n  U: \"Untracked\",\n};\n\nconst beforeMount = (monaco: Monaco) => {\n  monaco.editor.defineTheme(\"custom-diff-theme\", {\n    base: \"vs-dark\",\n    inherit: true,\n    rules: [\n      { token: \"comment\", foreground: \"6a9955\" },\n      { token: \"keyword\", foreground: \"569cd6\" },\n      { token: \"string\", foreground: \"ce9178\" },\n      { token: \"number\", foreground: \"b5cea8\" },\n    ],\n    colors: {\n      \"diffEditor.insertedTextBackground\": \"#014b01AA\",\n      \"diffEditor.removedTextBackground\": \"#750000AA\",\n      \"diffEditor.insertedLineBackground\": \"#003f00AA\",\n      \"diffEditor.removedLineBackground\": \"#5a0000AA\",\n      \"diffEditor.border\": \"var(--oh-border-subtle)\",\n      \"editorUnnecessaryCode.border\": \"#00000000\",\n      \"editorUnnecessaryCode.opacity\": \"rgba(0, 0, 0, 0.467)\",\n    },\n  });\n};\n\nexport interface FileDiffViewerProps {\n  path: string;\n  type: GitChangeStatus;\n  /**\n   * When set, show the file's diff as changed by this commit instead of\n   * the working-tree-vs-base diff. Deleted files render their content in\n   * commit mode (both sides come from git objects).\n   */\n  commit?: string;\n}\n\nexport function FileDiffViewer({ path, type, commit }: FileDiffViewerProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n  const [editorHeight, setEditorHeight] = React.useState(400);\n  const [viewMode, setViewMode] = React.useState<ViewMode>(\"diff\");\n  const diffEditorRef = React.useRef<editor_t.IStandaloneDiffEditor>(null);\n  const singleEditorRef = React.useRef<editor_t.IStandaloneCodeEditor>(null);\n\n  const isAdded = type === \"A\" || type === \"U\";\n  const isDeleted = type === \"D\";\n\n  const filePath = React.useMemo(() => {\n    if (type === \"R\") {\n      const parts = path.split(/\\s+/).slice(1);\n      return parts[parts.length - 1];\n    }\n    return path;\n  }, [path, type]);\n\n  const {\n    data: diff,\n    isLoading,\n    isSuccess,\n    isRefetching,\n  } = useUnifiedGitDiff({\n    filePath,\n    type,\n    enabled: !isCollapsed,\n    commit,\n  });\n\n  const updateEditorHeight = React.useCallback(() => {\n    if (!diffEditorRef.current) return;\n    const originalEditor = diffEditorRef.current.getOriginalEditor();\n    const modifiedEditor = diffEditorRef.current.getModifiedEditor();\n    if (originalEditor && modifiedEditor) {\n      setEditorHeight(\n        Math.max(\n          originalEditor.getContentHeight(),\n          modifiedEditor.getContentHeight(),\n        ) + 20,\n      );\n    }\n  }, []);\n\n  const updateSingleEditorHeight = React.useCallback(() => {\n    if (singleEditorRef.current) {\n      setEditorHeight(singleEditorRef.current.getContentHeight() + 20);\n    }\n  }, []);\n\n  const handleDiffEditorMount = (editor: editor_t.IStandaloneDiffEditor) => {\n    diffEditorRef.current = editor;\n    updateEditorHeight();\n    editor.getOriginalEditor().onDidContentSizeChange(updateEditorHeight);\n    editor.getModifiedEditor().onDidContentSizeChange(updateEditorHeight);\n  };\n\n  const handleSingleEditorMount = (editor: editor_t.IStandaloneCodeEditor) => {\n    singleEditorRef.current = editor;\n    updateSingleEditorHeight();\n    editor.onDidContentSizeChange(updateSingleEditorHeight);\n  };\n\n  const status = (type === \"U\" ? STATUS_MAP.A : STATUS_MAP[type]) || \"?\";\n  const statusIcon =\n    typeof status === \"string\" ? (\n      <Typography.Text>{status}</Typography.Text>\n    ) : (\n      React.createElement(status, { className: \"w-5 h-5\" })\n    );\n\n  const isFetchingData = isLoading || isRefetching;\n  const language = getLanguageFromPath(filePath);\n  const isMarkdownFile = language === \"markdown\";\n  const singleViewContent =\n    viewMode === \"old\" ? (diff?.original ?? \"\") : (diff?.modified ?? \"\");\n\n  const renderContent = () => {\n    if (viewMode === \"diff\") {\n      return (\n        <EditorContainer height={editorHeight}>\n          <DiffEditor\n            data-testid=\"file-diff-viewer\"\n            className=\"w-full h-full\"\n            language={language}\n            original={isAdded ? \"\" : (diff?.original ?? \"\")}\n            modified={isDeleted ? \"\" : (diff?.modified ?? \"\")}\n            theme=\"custom-diff-theme\"\n            onMount={handleDiffEditorMount}\n            beforeMount={beforeMount}\n            options={{\n              ...SHARED_EDITOR_OPTIONS,\n              renderSideBySide: !isAdded && !isDeleted,\n              hideUnchangedRegions: { enabled: true },\n            }}\n          />\n        </EditorContainer>\n      );\n    }\n\n    if (isMarkdownFile) {\n      return (\n        <div\n          className=\"w-full border-b border-[var(--oh-border)] overflow-auto p-4 bg-base prose prose-invert max-w-none\"\n          data-testid=\"markdown-preview\"\n        >\n          <MarkdownRenderer\n            content={singleViewContent}\n            includeStandard\n            includeHeadings\n          />\n        </div>\n      );\n    }\n\n    return (\n      <EditorContainer height={editorHeight}>\n        <Editor\n          data-testid=\"file-single-viewer\"\n          className=\"w-full h-full\"\n          language={language}\n          value={singleViewContent}\n          theme=\"custom-diff-theme\"\n          beforeMount={beforeMount}\n          onMount={handleSingleEditorMount}\n          options={SHARED_EDITOR_OPTIONS}\n        />\n      </EditorContainer>\n    );\n  };\n\n  return (\n    <div data-testid=\"file-diff-viewer-outer\" className=\"w-full flex flex-col\">\n      <div\n        className=\"flex justify-between items-center px-3 py-2.5 border-b border-[var(--oh-border)] hover:cursor-pointer\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        <span className=\"text-sm w-full text-content flex items-center gap-2\">\n          {isFetchingData ? <LoadingSpinner className=\"w-4 h-4\" /> : statusIcon}\n          <strong className=\"w-full truncate font-medium\">{filePath}</strong>\n          {!isCollapsed && !isDeleted && (\n            <span\n              className=\"flex items-center gap-0.5 shrink-0\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              {VIEW_MODES.map(({ mode, icon: Icon }) => (\n                <button\n                  key={mode}\n                  data-testid={`view-mode-${mode}`}\n                  type=\"button\"\n                  aria-pressed={viewMode === mode}\n                  onClick={() => setViewMode(mode)}\n                  className={cn(\n                    \"p-1 rounded transition-colors cursor-pointer\",\n                    viewMode === mode\n                      ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                      : \"text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-white\",\n                  )}\n                >\n                  <Icon className=\"w-4 h-4\" />\n                </button>\n              ))}\n            </span>\n          )}\n          <button data-testid=\"collapse\" type=\"button\">\n            <ChevronUp\n              className={cn(\n                \"w-4 h-4 transition-transform\",\n                isCollapsed && \"transform rotate-180\",\n              )}\n            />\n          </button>\n        </span>\n      </div>\n\n      {!isCollapsed && isDeleted && !commit && (\n        <div\n          data-testid=\"file-deleted-message\"\n          className=\"w-full border-b border-[var(--oh-border)] p-4 bg-base text-[var(--oh-text-dim)] text-sm\"\n        >\n          {t(I18nKey.DIFF_VIEWER$FILE_DELETED)}\n        </div>\n      )}\n\n      {!isCollapsed && (!isDeleted || !!commit) && isSuccess && renderContent()}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/diff-viewer/file-diff-viewer.d.ts

@@ -2,5 +2,11 @@ import { GitChangeStatus } from "#/api/open-hands.types";
 export interface FileDiffViewerProps {
     path: string;
     type: GitChangeStatus;
+    /**
+     * When set, show the file's diff as changed by this commit instead of
+     * the working-tree-vs-base diff. Deleted files render their content in
+     * commit mode (both sides come from git objects).
+     */
+    commit?: string;
 }
-export declare function FileDiffViewer({ path, type }: FileDiffViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileDiffViewer({ path, type, commit }: FileDiffViewerProps): import("react/jsx-runtime").JSX.Element;