Spaces:
Runtime error
Runtime error
File size: 2,681 Bytes
37a6ee1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | import React, { useState, useEffect } from "react";
export default function QueryInput({ onSubmit, loading, datasetName, schema, onArrowUp }) {
const [question, setQuestion] = useState("");
// Clear input when dataset changes
useEffect(() => {
setQuestion("");
}, [datasetName]);
const handleFormSubmit = (e) => {
if (e) e.preventDefault();
if (!question || question.trim().length < 3 || loading) return;
onSubmit(question.trim());
setQuestion("");
};
const handleKeyDown = (e) => {
// Enter key or Ctrl+Enter submits the form, but Shift+Enter adds a newline
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleFormSubmit();
} else if (e.key === "Enter" && e.ctrlKey) {
e.preventDefault();
handleFormSubmit();
}
// Arrow Up when input is empty fills with last question
if (e.key === "ArrowUp" && !question.trim()) {
if (onArrowUp) {
const lastQ = onArrowUp();
if (lastQ) {
e.preventDefault();
setQuestion(lastQ);
}
}
}
};
return (
<div className="query-input-section" style={{ borderTop: "1px solid var(--border-color)", padding: "16px 20px" }}>
<form onSubmit={handleFormSubmit} style={{ display: "flex", gap: "12px", alignItems: "flex-end" }}>
<div style={{ flexGrow: 1, position: "relative" }}>
<textarea
className="query-input"
style={{ width: "100%", height: "64px", resize: "none", display: "block" }}
value={question}
onChange={(e) => setQuestion(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={`Ask a question about '${datasetName}' in plain English... (Ctrl+Enter to submit, Arrow Up for last question)`}
disabled={loading}
rows={2}
/>
</div>
<button
type="submit"
className="btn-primary"
style={{ height: "48px", padding: "0 20px", display: "flex", alignItems: "center", gap: "6px" }}
disabled={loading || !question.trim() || question.trim().length < 3}
>
<span>Ask</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</form>
</div>
);
}
|