@meshxdata/fops 0.1.52 → 0.1.54

package/src/web/frontend/src/components/InputBox.jsx

@@ -0,0 +1,523 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+
+const SLASH_COMMANDS = [
+  { name: "/agents", desc: "List available agents" },
+  { name: "/agent", desc: "Open agent (use /agent <name>)" },
+  { name: "/mesh", desc: "Generate landscape for a mesh (pick from list)" },
+  { name: "/up", desc: "Start Foundation stack" },
+  { name: "/down", desc: "Stop Foundation stack" },
+  { name: "/bootstrap", desc: "Create demo data mesh (~5 min)" },
+  { name: "/train", desc: "Fine-tune embedding model" },
+  { name: "/plan", desc: "Draft a step-by-step implementation plan" },
+  { name: "/ollama", desc: "Setup Ollama" },
+  { name: "/help", desc: "Show help and shortcuts" },
+  { name: "/clear", desc: "Clear chat view" },
+  { name: "/sessions", desc: "List saved sessions" },
+  { name: "/exit", desc: "Close session" },
+];
+
+const MAX_ATTACHMENT_BYTES = 256 * 1024;
+const MAX_ATTACHMENT_CHARS = 24_000;
+
+function guessCodeFence(fileName = "", mimeType = "") {
+  const lower = String(fileName || "").toLowerCase();
+  if (lower.endsWith(".json") || mimeType.includes("json")) return "json";
+  if (lower.endsWith(".md")) return "markdown";
+  if (lower.endsWith(".yml") || lower.endsWith(".yaml")) return "yaml";
+  if (lower.endsWith(".csv")) return "csv";
+  if (lower.endsWith(".sql")) return "sql";
+  if (lower.endsWith(".py")) return "python";
+  if (lower.endsWith(".ts") || lower.endsWith(".tsx")) return "typescript";
+  if (lower.endsWith(".js") || lower.endsWith(".jsx")) return "javascript";
+  if (lower.endsWith(".xml")) return "xml";
+  if (lower.endsWith(".html")) return "html";
+  if (lower.endsWith(".css")) return "css";
+  if (lower.endsWith(".sh")) return "bash";
+  return "text";
+}
+
+function formatAttachmentPrompt({ name, type, size, text, truncated }) {
+  const lang = guessCodeFence(name, type);
+  const truncationNote = truncated ? `\n[Truncated to first ${MAX_ATTACHMENT_CHARS} chars]` : "";
+  return [
+    `[Attached file: ${name} | type: ${type || "unknown"} | size: ${size} bytes]${truncationNote}`,
+    "",
+    "```" + lang,
+    text,
+    "```",
+  ].join("\n");
+}
+
+export default function InputBox({ onSubmit, onCancel, disabled, streaming = false, queuedCount = 0 }) {
+  const [input, setInput] = useState("");
+  const [pendingAttachments, setPendingAttachments] = useState([]);
+  const [history, setHistory] = useState([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [slashSelected, setSlashSelected] = useState(0);
+  const [attachStatus, setAttachStatus] = useState("");
+  const [sttSupported, setSttSupported] = useState(false);
+  const [sttListening, setSttListening] = useState(false);
+  const [sttStatus, setSttStatus] = useState("");
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const speechRef = useRef(null);
+  const sttBaseRef = useRef("");
+  const sttStoppingRef = useRef(false);
+
+  const filterNorm = input.trim().toLowerCase();
+  const slashOpen = filterNorm.startsWith("/");
+  const slashMatches = useMemo(() => {
+    if (!slashOpen) return [];
+    return SLASH_COMMANDS.filter((c) =>
+      c.name.toLowerCase().startsWith(filterNorm)
+    );
+  }, [slashOpen, filterNorm]);
+
+  useEffect(() => {
+    setSlashSelected(0);
+  }, [filterNorm]);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, [disabled]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    setSttSupported(typeof Recognition === "function");
+
+    return () => {
+      try {
+        speechRef.current?.stop?.();
+      } catch {}
+      speechRef.current = null;
+    };
+  }, []);
+
+  const completeSlash = (cmd) => {
+    const name = cmd.split(" ")[0];
+    setInput(name + " ");
+    setSlashSelected(0);
+    textareaRef.current?.focus();
+  };
+
+  const submitCurrent = () => {
+    const text = input.trim();
+    const hasAttachments = pendingAttachments.length > 0;
+    if ((!text && !hasAttachments) || disabled) return;
+
+    const attachmentBlocks = pendingAttachments.map((file) =>
+      formatAttachmentPrompt({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        text: file.text,
+        truncated: file.truncated,
+      }),
+    );
+
+    const payload = [text, ...attachmentBlocks].filter(Boolean).join("\n\n");
+    const historyEntry = [text, ...pendingAttachments.map((f) => `[Attached file: ${f.name}]`)]
+      .filter(Boolean)
+      .join(" ");
+
+    if (historyEntry.trim()) {
+      setHistory((prev) => [...prev, historyEntry.trim()]);
+    }
+
+    onSubmit(payload);
+    setInput("");
+    setPendingAttachments([]);
+    setAttachStatus("");
+    setHistoryIndex(-1);
+  };
+
+  const handleKeyDown = (e) => {
+    if (slashOpen && slashMatches.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSlashSelected((i) => Math.min(i + 1, slashMatches.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSlashSelected((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        completeSlash(slashMatches[slashSelected].name);
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const cmd = slashMatches[slashSelected].name;
+        completeSlash(cmd);
+        setHistory((prev) => [...prev, cmd.trim()]);
+        onSubmit(cmd.trim());
+        setInput("");
+        setPendingAttachments([]);
+        setSlashSelected(0);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setInput("");
+        setSlashSelected(0);
+        return;
+      }
+    }
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submitCurrent();
+      return;
+    }
+
+    if (e.key === "Escape") {
+      if ((disabled || streaming) && onCancel) onCancel();
+      if (slashOpen) setInput("");
+      return;
+    }
+
+    if (e.key === "ArrowUp" && !input.includes("\n") && !slashOpen) {
+      e.preventDefault();
+      if (history.length > 0 && historyIndex < history.length - 1) {
+        const idx = historyIndex + 1;
+        setHistoryIndex(idx);
+        setInput(history[history.length - 1 - idx] || "");
+      }
+      return;
+    }
+
+    if (e.key === "ArrowDown" && !input.includes("\n") && !slashOpen) {
+      e.preventDefault();
+      if (historyIndex > 0) {
+        const idx = historyIndex - 1;
+        setHistoryIndex(idx);
+        setInput(history[history.length - 1 - idx] || "");
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1);
+        setInput("");
+      }
+    }
+  };
+
+  const handleChange = (e) => {
+    setInput(e.target.value);
+    setHistoryIndex(-1);
+    const ta = e.target;
+    ta.style.height = "auto";
+    ta.style.height = Math.min(ta.scrollHeight, 150) + "px";
+  };
+
+  const addAttachment = async (file) => {
+    if (!file) return;
+    if (file.size > MAX_ATTACHMENT_BYTES) {
+      setAttachStatus(`File too large (${file.size} bytes). Max ${MAX_ATTACHMENT_BYTES} bytes.`);
+      return;
+    }
+    try {
+      setAttachStatus(`Reading ${file.name}...`);
+      const raw = await file.text();
+      if (raw.includes("\u0000")) {
+        setAttachStatus("This looks like a binary file. Please attach a text-based file.");
+        return;
+      }
+      const truncated = raw.length > MAX_ATTACHMENT_CHARS;
+      const text = truncated ? raw.slice(0, MAX_ATTACHMENT_CHARS) : raw;
+      const block = formatAttachmentPrompt({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        text,
+        truncated,
+      });
+      setPendingAttachments((prev) => [
+        ...prev,
+        {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          text,
+          truncated,
+        },
+      ]);
+      setAttachStatus(`Attached ${file.name}`);
+      textareaRef.current?.focus();
+    } catch {
+      setAttachStatus("Could not read file. Please try again.");
+    }
+  };
+
+  const handleFileChange = async (e) => {
+    const files = Array.from(e.target.files || []);
+    for (const file of files) {
+      // Keep reads sequential to avoid jarring status flicker.
+      // eslint-disable-next-line no-await-in-loop
+      await addAttachment(file);
+    }
+    e.target.value = "";
+  };
+
+  const removeAttachment = (name) => {
+    setPendingAttachments((prev) => prev.filter((file) => file.name !== name));
+  };
+
+  const resizeTextarea = () => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = Math.min(ta.scrollHeight, 150) + "px";
+  };
+
+  const applyTranscript = (transcript) => {
+    const base = sttBaseRef.current || "";
+    const sep = base && !base.endsWith(" ") ? " " : "";
+    const merged = `${base}${sep}${String(transcript || "").trim()}`.trim();
+    setInput(merged);
+    setHistoryIndex(-1);
+    requestAnimationFrame(resizeTextarea);
+  };
+
+  const toggleDictation = () => {
+    if (disabled || !sttSupported) return;
+    if (sttListening) {
+      try {
+        sttStoppingRef.current = true;
+        speechRef.current?.stop?.();
+      } catch {}
+      setSttListening(false);
+      setSttStatus("Stopped listening.");
+      return;
+    }
+
+    const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (typeof Recognition !== "function") {
+      setSttStatus("Speech recognition is not available in this browser.");
+      return;
+    }
+
+    const recognition = new Recognition();
+    speechRef.current = recognition;
+    recognition.lang = navigator?.language || "en-US";
+    recognition.interimResults = true;
+    recognition.continuous = true;
+
+    sttBaseRef.current = input.trim();
+    setSttStatus("Listening… speak now.");
+    setSttListening(true);
+    sttStoppingRef.current = false;
+
+    recognition.onresult = (event) => {
+      const transcript = Array.from(event.results || [])
+        .map((r) => r?.[0]?.transcript || "")
+        .join(" ")
+        .trim();
+      applyTranscript(transcript);
+    };
+
+    recognition.onerror = (event) => {
+      const code = event?.error || "unknown";
+      if (code === "aborted" || sttStoppingRef.current) {
+        setSttStatus("Stopped listening.");
+        setSttListening(false);
+        return;
+      }
+      const message = code === "not-allowed"
+        ? "Microphone permission denied."
+        : code === "no-speech"
+          ? "No speech detected."
+          : `Speech recognition error: ${code}`;
+      setSttStatus(message);
+      setSttListening(false);
+    };
+
+    recognition.onend = () => {
+      setSttListening(false);
+      sttStoppingRef.current = false;
+      setSttStatus((prev) => prev || "Stopped listening.");
+    };
+
+    try {
+      recognition.start();
+    } catch {
+      setSttListening(false);
+      setSttStatus("Could not start speech recognition.");
+    }
+  };
+
+  return (
+    <div className="border-t border-[#1a1a28] bg-[#0c0c12] px-4 py-3 relative">
+      {slashOpen && slashMatches.length > 0 && (
+        <div
+          className="absolute bottom-full left-4 right-4 mb-1 max-h-52 overflow-y-auto rounded-lg border border-[#26263a] bg-[#0c0c12] shadow-lg z-10"
+          role="listbox"
+        >
+          {slashMatches.map((c, i) => (
+            <div
+              key={c.name}
+              role="option"
+              aria-selected={i === slashSelected}
+              className={`flex items-center justify-between gap-3 px-3 py-2 cursor-pointer text-sm ${
+                i === slashSelected
+                  ? "bg-[#f97316]/20 text-[#f97316]"
+                  : "text-[#e0dfe4] hover:bg-[#1a1a28]"
+              }`}
+              onClick={() => {
+                completeSlash(c.name);
+                setHistory((prev) => [...prev, c.name.trim()]);
+                onSubmit(c.name.trim());
+                setInput("");
+              }}
+              onMouseEnter={() => setSlashSelected(i)}
+            >
+              <span className="font-mono font-semibold">{c.name}</span>
+              <span className="text-[#6b6b80] text-xs">{c.desc}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div
+        className={`
+        flex items-end gap-3 bg-[#08080c] border rounded-xl px-4 py-2.5
+        transition-all duration-300
+        ${disabled
+          ? "border-[#1a1a28] opacity-60"
+          : "border-[#26263a] focus-within:border-[#f97316]/50 focus-within:shadow-[0_0_20px_rgba(249,115,22,0.08)]"
+        }
+      `}
+      >
+        {pendingAttachments.length > 0 && (
+          <div className="absolute left-8 right-8 -top-9 flex flex-wrap gap-1.5">
+            {pendingAttachments.map((file) => (
+              <span
+                key={`pending-${file.name}`}
+                className="inline-flex max-w-[240px] items-center gap-1.5 rounded-md border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[11px] text-[#b5b5c4]"
+              >
+                <span aria-hidden="true">📄</span>
+                <span className="truncate">{file.name}</span>
+                <button
+                  type="button"
+                  onClick={() => removeAttachment(file.name)}
+                  className="text-[#7f7f95] hover:text-[#f97316] transition-colors"
+                  aria-label={`Remove ${file.name}`}
+                  title={`Remove ${file.name}`}
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <span
+          className={`font-mono text-sm pb-0.5 select-none transition-colors ${
+            disabled ? "text-[#26263a]" : "text-[#f97316]"
+          }`}
+        >
+          &#x276F;
+        </span>
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            disabled
+              ? "Unavailable"
+              : streaming
+                ? "Agent is responding… send a follow-up (it will queue). Esc to cancel"
+                : "Type a message… (/ for commands, Tab to complete, or attach a file)"
+          }
+          disabled={disabled}
+          rows={1}
+          className="flex-1 bg-transparent text-[#e0dfe4] text-sm font-mono outline-none resize-none
+            placeholder:text-[#2e2e40] disabled:cursor-not-allowed leading-relaxed"
+        />
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={handleFileChange}
+          disabled={disabled}
+        />
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+          title="Attach a text file"
+          className={`
+            flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold
+            transition-all duration-200
+            ${
+              disabled
+                ? "bg-[#18181f] text-[#3a3a50] cursor-not-allowed"
+                : "bg-[#18181f] text-[#8b8b9e] hover:text-[#f97316] hover:bg-[#1f1f2c]"
+            }
+          `}
+        >
+          &#128206;
+        </button>
+        <button
+          type="button"
+          onClick={toggleDictation}
+          disabled={disabled || !sttSupported}
+          title={sttSupported ? (sttListening ? "Stop voice input" : "Start voice input") : "Voice input not supported in this browser"}
+          aria-label={sttSupported ? (sttListening ? "Stop voice input" : "Start voice input") : "Voice input not supported"}
+          className={`
+            flex items-center justify-center gap-1 min-w-14 h-8 px-2 rounded-lg text-[11px] font-bold border
+            transition-all duration-200
+            ${
+              sttListening
+                ? "bg-[#f97316] text-[#08080c] border-[#fb923c] shadow-[0_0_12px_rgba(249,115,22,0.3)]"
+                : disabled || !sttSupported
+                  ? "bg-[#18181f] text-[#6b6b80] border-[#303045] cursor-not-allowed"
+                  : "bg-[#14141c] text-[#f5f5f7] border-[#5a5a78] hover:text-[#f97316] hover:border-[#f97316] hover:bg-[#1f1f2c]"
+            }
+          `}
+        >
+          <span aria-hidden="true">&#127908;</span>
+          Mic
+        </button>
+        <button
+          onClick={submitCurrent}
+          disabled={disabled || (!input.trim() && pendingAttachments.length === 0)}
+          className={`
+            flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold
+            transition-all duration-200
+            ${
+              (input.trim() || pendingAttachments.length > 0) && !disabled
+                ? "bg-[#f97316] text-[#08080c] hover:bg-[#fb923c] shadow-[0_0_12px_rgba(249,115,22,0.3)]"
+                : "bg-[#18181f] text-[#3a3a50] cursor-not-allowed"
+            }
+          `}
+        >
+          &#x2191;
+        </button>
+      </div>
+      {(streaming || queuedCount > 0) && (
+        <div className="mt-2 text-[11px] font-mono text-[#6b6b80]">
+          {streaming
+            ? `Response in progress. ${queuedCount > 0 ? `${queuedCount} follow-up${queuedCount === 1 ? "" : "s"} queued.` : "Send a follow-up to queue it."}`
+            : `${queuedCount} queued follow-up${queuedCount === 1 ? "" : "s"} waiting to send.`}
+        </div>
+      )}
+      {attachStatus && (
+        <div className="mt-2 text-[11px] font-mono text-[#6b6b80]">
+          {attachStatus}
+        </div>
+      )}
+      {sttStatus && (
+        <div className="mt-1 text-[11px] font-mono text-[#6b6b80]">
+          {sttStatus}
+        </div>
+      )}
+      {!sttSupported && (
+        <div className="mt-1 text-[11px] font-mono text-[#6b6b80]">
+          Voice input not supported in this browser. Try Chrome/Edge.
+        </div>
+      )}
+    </div>
+  );
+}