{fetchingData && }
@@ -601,12 +601,12 @@ export default function ChatHistory(props: ChatHistoryProps) {
index === data.chat.length - 2
? latestUserMessageRef
: // attach ref to the newest fetched message to handle scroll on fetch
- // note: stabilize index selection against last page having less messages than fetchMessageCount
- index ===
+ // note: stabilize index selection against last page having less messages than fetchMessageCount
+ index ===
data.chat.length -
- (currentPage - 1) * fetchMessageCount
- ? latestFetchedMessageRef
- : null
+ (currentPage - 1) * fetchMessageCount
+ ? latestFetchedMessageRef
+ : null
}
isMobileWidth={isMobileWidth}
chatMessage={chatMessage}
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.module.css b/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
index cfee75f16..9b1c1c28e 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
@@ -2,3 +2,10 @@ div.actualInputArea {
display: grid;
grid-template-columns: auto 1fr auto auto;
}
+
+/* Highlight when dragging files over the input area */
+.dragOver {
+ outline: 2px dashed rgba(59, 130, 246, 0.6);
+ /* blue-500 with transparency */
+ border-radius: 8px;
+}
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 408eea1a4..9dc161e45 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -111,6 +111,7 @@ export const ChatInputArea = forwardRef
((pr
const [progressValue, setProgressValue] = useState(0);
const [isDragAndDropping, setIsDragAndDropping] = useState(false);
+ const [isDraggingOver, setIsDraggingOver] = useState(false);
const [showCommandList, setShowCommandList] = useState(false);
const [useResearchMode, setUseResearchMode] = useState(
@@ -118,6 +119,7 @@ export const ChatInputArea = forwardRef((pr
);
const chatInputRef = ref as React.MutableRefObject;
+ const commandRef = useRef(null);
useEffect(() => {
if (!uploading) {
setProgressValue(0);
@@ -236,12 +238,23 @@ export const ChatInputArea = forwardRef((pr
function handleDragAndDropFiles(event: React.DragEvent) {
event.preventDefault();
setIsDragAndDropping(false);
+ setIsDraggingOver(false);
if (!event.dataTransfer.files) return;
uploadFiles(event.dataTransfer.files);
}
+ function handlePaste(event: React.ClipboardEvent) {
+ if (!event.clipboardData) return;
+ const files = event.clipboardData.files;
+ if (files && files.length > 0) {
+ // Prevent default only when handling files so simple text paste remains intact
+ event.preventDefault();
+ uploadFiles(files);
+ }
+ }
+
function uploadFiles(files: FileList) {
if (!props.isLoggedIn) {
setLoginRedirectMessage("Please login to chat with your files");
@@ -321,8 +334,8 @@ export const ChatInputArea = forwardRef((pr
} catch (error) {
setError(
"Error converting files. " +
- error +
- ". Please try again, or contact team@khoj.dev if the issue persists.",
+ error +
+ ". Please try again, or contact team@khoj.dev if the issue persists.",
);
console.error("Error converting files:", error);
return [];
@@ -421,11 +434,18 @@ export const ChatInputArea = forwardRef((pr
function handleDragOver(event: React.DragEvent) {
event.preventDefault();
setIsDragAndDropping(true);
+ setIsDraggingOver(true);
+ }
+
+ function handleDragEnter(event: React.DragEvent) {
+ event.preventDefault();
+ setIsDraggingOver(true);
}
function handleDragLeave(event: React.DragEvent) {
event.preventDefault();
setIsDragAndDropping(false);
+ setIsDraggingOver(false);
}
function removeImageUpload(index: number) {
@@ -514,7 +534,7 @@ export const ChatInputArea = forwardRef((pr
sideOffset={props.conversationId ? 0 : 80}
alignOffset={0}
>
-
+
((pr
))}
((pr
autoFocus={true}
value={message}
onKeyDown={(e) => {
+ // When the slash command menu is visible, forward ArrowUp/ArrowDown
+ // key events to the Command component so it can handle selection.
+ // We dispatch a cloned KeyboardEvent on the Command DOM node and
+ // then prevent the textarea from moving the caret.
+ if (showCommandList && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+ if (commandRef.current) {
+ const forwardedEvent = new window.KeyboardEvent(e.type, {
+ key: e.key,
+ code: (e as any).code,
+ bubbles: true,
+ cancelable: true,
+ shiftKey: e.shiftKey,
+ ctrlKey: e.ctrlKey,
+ altKey: e.altKey,
+ metaKey: e.metaKey,
+ });
+ // Dispatch the cloned event on the Command element so the
+ // Command component's internal handler receives it.
+ commandRef.current.dispatchEvent(forwardedEvent);
+ }
+ // Prevent the textarea caret from moving after dispatching.
+ e.preventDefault();
+ }
+
+ // If the slash command menu is open, Enter should select the highlighted command
+ if (showCommandList && e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ const selectedEl = commandRef.current?.querySelector(
+ '[data-selected="true"]',
+ ) as HTMLElement | null;
+ if (selectedEl) {
+ selectedEl.click();
+ }
+ setShowCommandList(false);
+ return;
+ }
+
if (
e.key === "Enter" &&
!e.shiftKey &&
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 0f6483624..943f0c1a4 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -141,7 +141,7 @@ div.khoj div.imagesContainer {
overflow-x: hidden;
}
-div.chatMessageContainer > img {
+div.chatMessageContainer>img {
width: auto;
height: auto;
max-width: 100%;
@@ -233,6 +233,45 @@ div.trainOfThoughtElement {
align-items: start;
}
+/* Ensure selection highlight is visible inside chat messages */
+.chatMessage *::selection,
+.chatMessage ::selection,
+.chatMessage *::-moz-selection,
+.chatMessage ::-moz-selection {
+ background: rgba(59, 130, 246, 0.35) !important;
+ color: inherit !important;
+ -webkit-text-fill-color: unset !important;
+}
+
+.dark .chatMessage *::selection,
+.dark .chatMessage ::selection,
+.dark .chatMessage *::-moz-selection,
+.dark .chatMessage ::-moz-selection {
+ background: rgba(99, 102, 241, 0.45) !important;
+ color: inherit !important;
+ -webkit-text-fill-color: unset !important;
+}
+
+/* Footer controls visibility toggle to avoid DOM mount/unmount while preserving selection */
+.chatFooterInner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.hiddenControls {
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(4px);
+}
+
+.visibleControls {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+}
+
div.trainOfThoughtElement ol,
div.trainOfThoughtElement ul {
margin: auto;
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index ec8a90cc5..97a445928 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -422,6 +422,7 @@ const ChatMessage = forwardRef
((props, ref) =>
const interruptedRef = useRef(false);
const messageRef = useRef(null);
+ const selectionActiveRef = useRef(false);
useEffect(() => {
interruptedRef.current = interrupted;
@@ -687,6 +688,42 @@ const ChatMessage = forwardRef((props, ref) =>
}
}, [markdownRendered, messageRef]);
+ // Track if there is an active text selection inside this message (no React re-render)
+ useEffect(() => {
+ const onSelectionChange = () => {
+ try {
+ const sel = document.getSelection();
+ selectionActiveRef.current = !!(
+ sel && sel.rangeCount > 0 && sel.toString() &&
+ messageRef.current &&
+ (messageRef.current.contains(sel.anchorNode) || messageRef.current.contains(sel.focusNode))
+ );
+ } catch {
+ selectionActiveRef.current = false;
+ }
+ };
+
+ // Attach scroll handler to the chat viewport only, not window
+ const scrollAreaViewport = document.querySelector("[data-radix-scroll-area-viewport]");
+ const onScroll = () => {
+ // De-bounce lightly to read selection after scroll applies
+ setTimeout(() => {
+ const sel = document.getSelection();
+ if (!sel || !sel.toString() || !messageRef.current) {
+ selectionActiveRef.current = false;
+ }
+ }, 30);
+ };
+
+ document.addEventListener("selectionchange", onSelectionChange);
+ if (scrollAreaViewport) scrollAreaViewport.addEventListener("scroll", onScroll, { passive: true });
+
+ return () => {
+ document.removeEventListener("selectionchange", onSelectionChange);
+ if (scrollAreaViewport) scrollAreaViewport.removeEventListener("scroll", onScroll);
+ };
+ }, []);
+
// Fetch file content for dialog and hover using shared hook
const {
content: previewContentHook,
@@ -874,12 +911,21 @@ const ChatMessage = forwardRef((props, ref) =>
props.chatMessage.codeContext,
);
+ function handleMouseEnter(event: React.MouseEvent) {
+ setIsHovering(true);
+ }
+ function handleMouseLeave(event: React.MouseEvent) {
+ // Prevent hover collapse while a selection inside this message is active
+ if (selectionActiveRef.current) return;
+ setIsHovering(false);
+ }
+
return (
setIsHovering(false)}
- onMouseEnter={(event) => setIsHovering(true)}
+ onMouseLeave={handleMouseLeave}
+ onMouseEnter={handleMouseEnter}
data-created={formatDate(props.chatMessage.created)}
>
@@ -1054,126 +1100,119 @@ const ChatMessage = forwardRef((props, ref) =>
/>
- {(isHovering || props.isMobileWidth || props.isLastMessage || isPlaying) && (
- <>
-
- {renderTimeStamp(props.chatMessage.created)}
-
-
- {props.chatMessage.by === "khoj" &&
- (isPlaying ? (
- interrupted ? (
-
- ) : (
-
- )
+
+
+ {renderTimeStamp(props.chatMessage.created)}
+
+
+ {props.chatMessage.by === "khoj" &&
+ (isPlaying ? (
+ interrupted ? (
+
) : (
-
- ))}
- {props.chatMessage.turnId && (
-
- )}
- {props.chatMessage.by === "khoj" &&
- props.onRetryMessage &&
- props.isLastMessage && (
- )}
-
+ ))}
+ {props.chatMessage.turnId && (
+
- {props.chatMessage.by === "khoj" &&
- (props.chatMessage.intent ? (
-
- ) : (
-
{
+ const turnId = props.chatMessage.turnId || props.turnId;
+ const query =
+ props.chatMessage.rawQuery ||
+ props.chatMessage.intent?.query;
+ if (query) {
+ props.onRetryMessage?.(query, turnId);
+ } else {
+ console.error("No original query found for retry");
+ const fallbackQuery = prompt(
+ "Enter the original query to retry:",
+ );
+ if (fallbackQuery) {
+ props.onRetryMessage?.(fallbackQuery, turnId);
+ }
}
- kquery={props.chatMessage.message}
+ }}
+ >
+
- ))}
-
-
- )}
+
+ )}
+
+ {props.chatMessage.by === "khoj" &&
+ (props.chatMessage.intent ? (
+
+ ) : (
+
+ ))}
+
+