Spaces:
Runtime error
Runtime error
File size: 3,129 Bytes
28cf767 bbab1dd 28cf767 | 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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | "use client";
import { useState, useRef, type KeyboardEvent } from "react";
interface QuestionInputProps {
onSubmit: (question: string) => void;
disabled?: boolean;
}
const EXAMPLES = [
"What is Universal Grammar?",
"How did Chomsky critique behaviorism?",
"Compare Principles and Parameters with Minimalism.",
"How did Chomsky's views on language acquisition evolve over time?",
"What is Chomsky's theory of propaganda?",
];
export default function QuestionInput({ onSubmit, disabled }: QuestionInputProps) {
const [value, setValue] = useState("");
const textareaRef = useRef<HTMLTextAreaElement>(null);
const handleSubmit = () => {
const trimmed = value.trim();
if (!trimmed || disabled) return;
onSubmit(trimmed);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSubmit();
}
};
const handleExample = (q: string) => {
setValue(q);
textareaRef.current?.focus();
};
return (
<div className="flex flex-col gap-3 w-full">
{/* Input box */}
<div className="flex gap-2 items-end">
<textarea
ref={textareaRef}
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Ask something about Noam Chomsky's work…"
rows={2}
disabled={disabled}
className="
flex-1 resize-none rounded-xl border border-zinc-700 bg-zinc-900
px-4 py-3 text-sm text-zinc-100 placeholder-zinc-500
focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500
disabled:opacity-50 disabled:cursor-not-allowed
transition-colors
"
/>
<button
onClick={handleSubmit}
disabled={disabled}
className="
flex-shrink-0 h-12 px-5 rounded-xl text-sm font-semibold
bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700
text-white transition-colors
disabled:opacity-40 disabled:cursor-not-allowed
flex items-center gap-2
"
>
{disabled ? (
<>
<span className="w-3 h-3 rounded-full border-2 border-white/40 border-t-white animate-spin" />
Running
</>
) : (
"Ask →"
)}
</button>
</div>
{/* Example questions */}
<div className="flex flex-wrap gap-2">
<span className="text-[11px] text-zinc-600 self-center">Try:</span>
{EXAMPLES.map((q) => (
<button
key={q}
onClick={() => handleExample(q)}
disabled={disabled}
className="
text-[11px] px-2.5 py-1 rounded-lg border border-zinc-700
text-zinc-400 hover:text-zinc-200 hover:border-zinc-500
bg-zinc-900 transition-colors disabled:opacity-40 disabled:cursor-not-allowed
"
>
{q}
</button>
))}
</div>
</div>
);
}
|