fixed cursor feature
This commit is contained in:
ValueOn AG
parent
60887682a5
commit
6f0585192a
4 changed files with 190 additions and 63 deletions
|
|
@ -74,6 +74,12 @@
|
|||
color: var(--text-secondary, #666);
|
||||
}
|
||||
|
||||
.dragHint {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary, #999);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.fileItems {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
|
@ -84,8 +90,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
padding: 6px 16px;
|
||||
cursor: grab;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
|
|
@ -93,13 +99,32 @@
|
|||
background: var(--hover-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.fileItemSelected {
|
||||
background: var(--selected-bg, #e8f0fe);
|
||||
.fileItem:active {
|
||||
cursor: grabbing;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.fileCheckbox {
|
||||
color: var(--primary-color, #4a90d9);
|
||||
.dragHandle {
|
||||
color: var(--text-secondary, #ccc);
|
||||
flex-shrink: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.fileItem:hover .dragHandle {
|
||||
color: var(--text-secondary, #999);
|
||||
}
|
||||
|
||||
.dateGroup {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dateGroupHeader {
|
||||
padding: 6px 16px 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #999);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
|
|
@ -161,6 +186,12 @@
|
|||
background: var(--disabled-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.inputDropTarget {
|
||||
border-color: var(--primary-color, #4a90d9);
|
||||
background: var(--selected-bg, #e8f0fe);
|
||||
box-shadow: 0 0 0 2px var(--primary-color, #4a90d9) inset;
|
||||
}
|
||||
|
||||
/* Mode Toggle */
|
||||
.modeToggle {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*
|
||||
* Main page for the CodeEditor feature.
|
||||
* Three-panel layout: FileList (left) | Chat (center) | DiffPreview (right)
|
||||
* Supports simple mode (Phase 1) and agent mode (Phase 2).
|
||||
* Files are dragged from FileList into the prompt textarea as @fileName references.
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useCallback } from 'react';
|
||||
|
|
@ -22,11 +22,10 @@ export const CodeEditorPage: React.FC = () => {
|
|||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [mode, setMode] = useState<'simple' | 'agent'>('simple');
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
const {
|
||||
messages,
|
||||
selectedFileIds,
|
||||
toggleFileSelection,
|
||||
pendingEdits,
|
||||
acceptEdit,
|
||||
rejectEdit,
|
||||
|
|
@ -64,9 +63,9 @@ export const CodeEditorPage: React.FC = () => {
|
|||
const handleSubmit = useCallback(() => {
|
||||
const trimmed = inputValue.trim();
|
||||
if (!trimmed || isProcessing) return;
|
||||
sendMessage(trimmed, selectedFileIds, mode);
|
||||
sendMessage(trimmed, mode);
|
||||
setInputValue('');
|
||||
}, [inputValue, isProcessing, sendMessage, selectedFileIds, mode]);
|
||||
}, [inputValue, isProcessing, sendMessage, mode]);
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
|
|
@ -75,6 +74,50 @@ export const CodeEditorPage: React.FC = () => {
|
|||
}
|
||||
}, [handleSubmit]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
if (e.dataTransfer.types.includes('application/x-codeeditor-file')) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
setIsDragOver(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback(() => {
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
|
||||
const fileDataStr = e.dataTransfer.getData('application/x-codeeditor-file');
|
||||
if (!fileDataStr) return;
|
||||
|
||||
try {
|
||||
const fileData = JSON.parse(fileDataStr);
|
||||
const tag = `@${fileData.fileName}`;
|
||||
const textarea = inputRef.current;
|
||||
if (textarea) {
|
||||
const pos = textarea.selectionStart || inputValue.length;
|
||||
const before = inputValue.slice(0, pos);
|
||||
const after = inputValue.slice(pos);
|
||||
const spaceBefore = before.length > 0 && !before.endsWith(' ') && !before.endsWith('\n') ? ' ' : '';
|
||||
const spaceAfter = after.length > 0 && !after.startsWith(' ') && !after.startsWith('\n') ? ' ' : '';
|
||||
const newValue = `${before}${spaceBefore}${tag}${spaceAfter}${after}`;
|
||||
setInputValue(newValue);
|
||||
requestAnimationFrame(() => {
|
||||
const newPos = pos + spaceBefore.length + tag.length + spaceAfter.length;
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(newPos, newPos);
|
||||
});
|
||||
} else {
|
||||
setInputValue(prev => prev + (prev && !prev.endsWith(' ') ? ' ' : '') + tag + ' ');
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed drop data
|
||||
}
|
||||
}, [inputValue]);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div
|
||||
|
|
@ -83,11 +126,7 @@ export const CodeEditorPage: React.FC = () => {
|
|||
>
|
||||
{/* Left: File List */}
|
||||
<div className={styles.filePanel} style={{ width: `${fileListWidth}%` }}>
|
||||
<FileListPanel
|
||||
files={files}
|
||||
selectedFileIds={selectedFileIds}
|
||||
onToggle={toggleFileSelection}
|
||||
/>
|
||||
<FileListPanel files={files} />
|
||||
</div>
|
||||
|
||||
<div className={styles.divider} onMouseDown={fileListMouseDown} />
|
||||
|
|
@ -116,7 +155,7 @@ export const CodeEditorPage: React.FC = () => {
|
|||
className={`${styles.modeButton} ${mode === 'simple' ? styles.modeActive : ''}`}
|
||||
onClick={() => setMode('simple')}
|
||||
disabled={isProcessing}
|
||||
title="Single AI call with selected files as context"
|
||||
title="Single AI call -- drag files into prompt as @references"
|
||||
>
|
||||
<FaEdit /> Simple
|
||||
</button>
|
||||
|
|
@ -132,21 +171,24 @@ export const CodeEditorPage: React.FC = () => {
|
|||
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
className={styles.input}
|
||||
className={`${styles.input} ${isDragOver ? styles.inputDropTarget : ''}`}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
placeholder={mode === 'agent'
|
||||
? "Describe a complex task (e.g. 'Document all Python files')..."
|
||||
: "Describe what you want to change..."
|
||||
: "Drag files here and describe changes (e.g. 'In @config.yaml change the port to 8080')..."
|
||||
}
|
||||
rows={2}
|
||||
rows={3}
|
||||
disabled={isProcessing}
|
||||
/>
|
||||
<div className={styles.inputActions}>
|
||||
<span className={styles.fileCount}>
|
||||
{mode === 'simple'
|
||||
? `${selectedFileIds.length} file(s) selected`
|
||||
? `Drag files from the list into your prompt`
|
||||
: `Agent mode: AI reads files autonomously`
|
||||
}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/**
|
||||
* FileListPanel
|
||||
*
|
||||
* Lists uploaded text files with checkbox selection.
|
||||
* Selected files are sent as context to the AI.
|
||||
* Lists text files grouped by date, draggable into the prompt textarea.
|
||||
* Drag a file into the chat input to insert an @fileName reference.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { FaFile, FaCheckSquare, FaRegSquare } from 'react-icons/fa';
|
||||
import React, { useMemo } from 'react';
|
||||
import { FaFile, FaGripVertical } from 'react-icons/fa';
|
||||
import styles from './CodeEditor.module.css';
|
||||
|
||||
export interface FileInfo {
|
||||
|
|
@ -14,48 +14,95 @@ export interface FileInfo {
|
|||
fileName: string;
|
||||
mimeType: string;
|
||||
sizeBytes: number;
|
||||
modifiedAt?: number;
|
||||
}
|
||||
|
||||
interface FileListPanelProps {
|
||||
files: FileInfo[];
|
||||
selectedFileIds: string[];
|
||||
onToggle: (fileId: string) => void;
|
||||
}
|
||||
|
||||
export const FileListPanel: React.FC<FileListPanelProps> = ({ files, selectedFileIds, onToggle }) => {
|
||||
interface DateGroup {
|
||||
label: string;
|
||||
files: FileInfo[];
|
||||
}
|
||||
|
||||
export const FileListPanel: React.FC<FileListPanelProps> = ({ files }) => {
|
||||
const groups = useMemo(() => _groupByDate(files), [files]);
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, file: FileInfo) => {
|
||||
e.dataTransfer.setData('application/x-codeeditor-file', JSON.stringify({
|
||||
fileId: file.fileId,
|
||||
fileName: file.fileName,
|
||||
}));
|
||||
e.dataTransfer.setData('text/plain', `@${file.fileName}`);
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.fileList}>
|
||||
<div className={styles.panelHeader}>
|
||||
<h3>Files ({files.length})</h3>
|
||||
<span className={styles.selectedCount}>{selectedFileIds.length} selected</span>
|
||||
<span className={styles.dragHint}>drag into prompt</span>
|
||||
</div>
|
||||
<div className={styles.fileItems}>
|
||||
{files.length === 0 ? (
|
||||
<div className={styles.emptyState}>No text files uploaded yet</div>
|
||||
) : (
|
||||
files.map((file) => {
|
||||
const isSelected = selectedFileIds.includes(file.fileId);
|
||||
return (
|
||||
<div
|
||||
key={file.fileId}
|
||||
className={`${styles.fileItem} ${isSelected ? styles.fileItemSelected : ''}`}
|
||||
onClick={() => onToggle(file.fileId)}
|
||||
>
|
||||
<span className={styles.fileCheckbox}>
|
||||
{isSelected ? <FaCheckSquare /> : <FaRegSquare />}
|
||||
</span>
|
||||
<FaFile className={styles.fileIcon} />
|
||||
<span className={styles.fileName}>{file.fileName}</span>
|
||||
<span className={styles.fileSize}>{_formatSize(file.sizeBytes)}</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
groups.map((group) => (
|
||||
<div key={group.label} className={styles.dateGroup}>
|
||||
<div className={styles.dateGroupHeader}>{group.label}</div>
|
||||
{group.files.map((file) => (
|
||||
<div
|
||||
key={file.fileId}
|
||||
className={styles.fileItem}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, file)}
|
||||
>
|
||||
<FaGripVertical className={styles.dragHandle} />
|
||||
<FaFile className={styles.fileIcon} />
|
||||
<span className={styles.fileName}>{file.fileName}</span>
|
||||
<span className={styles.fileSize}>{_formatSize(file.sizeBytes)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function _groupByDate(files: FileInfo[]): DateGroup[] {
|
||||
const now = new Date();
|
||||
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() / 1000;
|
||||
const yesterdayStart = todayStart - 86400;
|
||||
|
||||
const today: FileInfo[] = [];
|
||||
const yesterday: FileInfo[] = [];
|
||||
const older: FileInfo[] = [];
|
||||
|
||||
const sorted = [...files].sort((a, b) => (b.modifiedAt || 0) - (a.modifiedAt || 0));
|
||||
|
||||
for (const file of sorted) {
|
||||
const ts = file.modifiedAt || 0;
|
||||
if (ts >= todayStart) {
|
||||
today.push(file);
|
||||
} else if (ts >= yesterdayStart) {
|
||||
yesterday.push(file);
|
||||
} else {
|
||||
older.push(file);
|
||||
}
|
||||
}
|
||||
|
||||
const groups: DateGroup[] = [];
|
||||
if (today.length > 0) groups.push({ label: 'Today', files: today });
|
||||
if (yesterday.length > 0) groups.push({ label: 'Yesterday', files: yesterday });
|
||||
if (older.length > 0) groups.push({ label: 'Older', files: older });
|
||||
if (groups.length === 0 && files.length > 0) groups.push({ label: 'All files', files: sorted });
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
function _formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* useCodeEditor Hook
|
||||
*
|
||||
* Manages SSE connection, file selection, message state, edit proposals,
|
||||
* and agent mode progress for the CodeEditor feature.
|
||||
* Manages SSE connection, message state, edit proposals, and agent progress.
|
||||
* File references are extracted from @fileName tags in the prompt text.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
||||
|
|
@ -21,13 +21,11 @@ export interface AgentProgress {
|
|||
|
||||
interface UseCodeEditorReturn {
|
||||
messages: Message[];
|
||||
selectedFileIds: string[];
|
||||
toggleFileSelection: (fileId: string) => void;
|
||||
pendingEdits: FileEditProposal[];
|
||||
acceptEdit: (editId: string) => void;
|
||||
rejectEdit: (editId: string) => void;
|
||||
isProcessing: boolean;
|
||||
sendMessage: (prompt: string, fileIds: string[], mode?: 'simple' | 'agent') => void;
|
||||
sendMessage: (prompt: string, mode?: 'simple' | 'agent') => void;
|
||||
stopProcessing: () => void;
|
||||
files: FileInfo[];
|
||||
agentProgress: AgentProgress | null;
|
||||
|
|
@ -35,7 +33,6 @@ interface UseCodeEditorReturn {
|
|||
|
||||
export function useCodeEditor(instanceId: string): UseCodeEditorReturn {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
|
||||
const [pendingEdits, setPendingEdits] = useState<FileEditProposal[]>([]);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [files, setFiles] = useState<FileInfo[]>([]);
|
||||
|
|
@ -48,15 +45,11 @@ export function useCodeEditor(instanceId: string): UseCodeEditorReturn {
|
|||
_loadFiles(instanceId, setFiles);
|
||||
}, [instanceId]);
|
||||
|
||||
const toggleFileSelection = useCallback((fileId: string) => {
|
||||
setSelectedFileIds(prev =>
|
||||
prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId]
|
||||
);
|
||||
}, []);
|
||||
|
||||
const sendMessage = useCallback((prompt: string, fileIds: string[], mode: 'simple' | 'agent' = 'simple') => {
|
||||
const sendMessage = useCallback((prompt: string, mode: 'simple' | 'agent' = 'simple') => {
|
||||
if (!instanceId || isProcessing) return;
|
||||
|
||||
const referencedFileIds = _extractFileRefs(prompt, files);
|
||||
|
||||
setIsProcessing(true);
|
||||
setAgentProgress(null);
|
||||
setMessages(prev => [...prev, {
|
||||
|
|
@ -96,7 +89,7 @@ export function useCodeEditor(instanceId: string): UseCodeEditorReturn {
|
|||
headers,
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
listFileId: fileIds,
|
||||
listFileId: referencedFileIds,
|
||||
}),
|
||||
credentials: 'include',
|
||||
signal: abortRef.current.signal,
|
||||
|
|
@ -150,7 +143,7 @@ export function useCodeEditor(instanceId: string): UseCodeEditorReturn {
|
|||
}]);
|
||||
setIsProcessing(false);
|
||||
});
|
||||
}, [instanceId, isProcessing, workflowId]);
|
||||
}, [instanceId, isProcessing, workflowId, files]);
|
||||
|
||||
const stopProcessing = useCallback(() => {
|
||||
if (abortRef.current) {
|
||||
|
|
@ -185,8 +178,6 @@ export function useCodeEditor(instanceId: string): UseCodeEditorReturn {
|
|||
|
||||
return {
|
||||
messages,
|
||||
selectedFileIds,
|
||||
toggleFileSelection,
|
||||
pendingEdits,
|
||||
acceptEdit,
|
||||
rejectEdit,
|
||||
|
|
@ -204,6 +195,22 @@ function _loadFiles(instanceId: string, setFiles: React.Dispatch<React.SetStateA
|
|||
.catch(err => console.error('Failed to load files:', err));
|
||||
}
|
||||
|
||||
function _extractFileRefs(prompt: string, files: FileInfo[]): string[] {
|
||||
const atPattern = /@([\w.\-]+)/g;
|
||||
const matchedIds: string[] = [];
|
||||
let match;
|
||||
|
||||
while ((match = atPattern.exec(prompt)) !== null) {
|
||||
const refName = match[1];
|
||||
const file = files.find(f => f.fileName === refName || f.fileName.toLowerCase() === refName.toLowerCase());
|
||||
if (file && !matchedIds.includes(file.fileId)) {
|
||||
matchedIds.push(file.fileId);
|
||||
}
|
||||
}
|
||||
|
||||
return matchedIds;
|
||||
}
|
||||
|
||||
function _handleSseEvent(
|
||||
event: any,
|
||||
setMessages: React.Dispatch<React.SetStateAction<Message[]>>,
|
||||
|
|
|
|||
Loading…
Reference in a new issue