Initial commit

src/components/ai-assistant/PromptInput.jsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ArrowUp, Square } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * PromptInput — the assistant's primary action.
+ *
+ * A textarea rather than an input, because these prompts are sentences: it grows
+ * with the content up to a cap, keeps Enter as send, and leaves Shift+Enter for a
+ * deliberate newline. That combination is what makes typing a real question feel
+ * natural instead of cramped.
+ *
+ * `placeholders` rotate while the field is empty and unfocused, which teaches
+ * the range of what can be asked without spending vertical space on a legend.
+ */
+export function PromptInput({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  busy = false,
+  placeholders = ['Ask anything…'],
+  /** Larger treatment for the landing state, where the input is the focus. */
+  size = 'default',
+  autoFocus = false,
+  className,
+}) {
+  const textareaRef = React.useRef(null);
+  const [focused, setFocused] = React.useState(false);
+  const [placeholderIndex, setPlaceholderIndex] = React.useState(0);
+
+  /* Grow to fit the content, up to a cap, then scroll internally. */
+  React.useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 148)}px`;
+  }, [value]);
+
+  /* Rotate the examples only while the field is idle — changing the placeholder
+     under someone who is mid-thought is distracting. */
+  React.useEffect(() => {
+    if (value || focused || placeholders.length < 2) return undefined;
+    const timer = setInterval(
+      () => setPlaceholderIndex((i) => (i + 1) % placeholders.length),
+      3800
+    );
+    return () => clearInterval(timer);
+  }, [value, focused, placeholders.length]);
+
+  React.useEffect(() => {
+    if (autoFocus) textareaRef.current?.focus();
+  }, [autoFocus]);
+
+  const submit = () => {
+    if (!value.trim() || busy) return;
+    onSubmit(value);
+  };
+
+  const onKeyDown = (event) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const large = size === 'large';
+
+  return (
+    <form
+      onSubmit={(e) => { e.preventDefault(); submit(); }}
+      className={cn(
+        'relative flex items-end gap-2 rounded-2xl border bg-surface transition-all duration-base ease-out',
+        large ? 'px-4 py-3' : 'px-3 py-2.5',
+        focused
+          ? 'border-krow-blue/50 shadow-[0_8px_28px_-8px_rgba(10,57,223,0.28)] ring-2 ring-krow-blue/15'
+          : 'border-border shadow-md hover:border-krow-blue/30',
+        className
+      )}
+    >
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder={placeholders[placeholderIndex]}
+        aria-label="Ask Krow AI"
+        className={cn(
+          'flex-1 min-w-0 resize-none bg-transparent leading-relaxed text-ink-1',
+          'placeholder:text-ink-4 outline-none no-scrollbar',
+          large ? 'text-body py-1' : 'text-body-sm py-0.5'
+        )}
+      />
+
+      {busy ? (
+        <button
+          type="button"
+          onClick={onStop}
+          aria-label="Stop generating"
+          className={cn(
+            'grid shrink-0 place-items-center rounded-full border border-border bg-surface text-ink-2',
+            'transition-colors duration-base hover:bg-surface-sunken focus-ring',
+            large ? 'w-9 h-9' : 'w-8 h-8'
+          )}
+        >
+          <Square className={large ? 'w-3.5 h-3.5' : 'w-3 h-3'} aria-hidden="true" />
+        </button>
+      ) : (
+        <button
+          type="submit"
+          disabled={!value.trim()}
+          aria-label="Send message"
+          className={cn(
+            'grid shrink-0 place-items-center rounded-full bg-krow-blue text-white',
+            'transition-all duration-base ease-out hover:bg-krow-blue-dark',
+            'disabled:bg-surface-sunken disabled:text-ink-4 focus-ring',
+            large ? 'w-9 h-9' : 'w-8 h-8'
+          )}
+        >
+          <ArrowUp className={large ? 'w-4 h-4' : 'w-3.5 h-3.5'} aria-hidden="true" />
+        </button>
+      )}
+    </form>
+  );
+}