@solidxai/core-ui 0.1.19-beta.0 → 0.1.19-beta.1

package/dist/components/core/solid-agent/client/agentSocket.ts

@@ -0,0 +1,276 @@
+import type { AgentAction, AgentConnection, AgentWireFrame } from "../types";
+import { agentWsUrl, clearAgentAuth, isAgentProcessAvailable, loadAgentAuth, onAgentAuthChange } from "./agentAuth";
+
+/**
+ * WebSocket client for the agent, connecting to the full `wsUrl` named at sign-in (agentAuth.ts).
+ *
+ * Held outside Redux because sockets are not serializable; the host wires its listeners to
+ * dispatch into agentSlice. Every outbound frame carries the `agentToken` from the agent login;
+ * there is no socket until the user has signed in with an API key, and signing out closes it. Unexpected closes
+ * reconnect with backoff (1s, 2s, 4s, then 15s) and re-send `resume_session`; frames sent
+ * while disconnected are queued and flushed once the session is re-established.
+ */
+
+const BACKOFF_MS = [1000, 2000, 4000, 8000, 15000];
+
+type EventListener = (frame: AgentWireFrame) => void;
+type StatusListener = (status: AgentConnection) => void;
+
+export class AgentSocket {
+    private ws: WebSocket | null = null;
+    private attempt = 0;
+    private timer: ReturnType<typeof setTimeout> | null = null;
+    private closedByUser = false;
+    private queue: AgentAction[] = [];
+    private eventListeners = new Set<EventListener>();
+    private statusListeners = new Set<StatusListener>();
+    private sessionId: string | null = null;
+    /** False until the agent confirms the session (session_started) on the current socket. */
+    private sessionReady = false;
+    private checkingProcessAvailability = false;
+    private unacknowledgedMessage: AgentAction | null = null;
+
+    private offAuthChange: () => void;
+    private readonly debugEmbed: boolean;
+
+    constructor(
+        private agentUrl: string,
+        private initialSessionId: string | null = null,
+        private checkProcessAvailability = false,
+    ) {
+        this.sessionId = initialSessionId;
+        this.debugEmbed = !checkProcessAvailability;
+        if (this.debugEmbed) console.info("[agent-embed][runtime] socket created", { endpoint: this.safeEndpoint(), hasInitialSession: !!initialSessionId });
+        // Signing in opens the socket on the wsUrl it named; signing out (or the token expiring) closes it.
+        this.offAuthChange = onAgentAuthChange(agentUrl, () => {
+            if (this.closedByUser) return;
+            if (agentWsUrl(agentUrl)) this.connect();
+            else this.disconnect();
+        });
+    }
+
+    private openSession() {
+        void this.sendRaw(this.sessionId ? { action: "resume_session", session_id: this.sessionId } : { action: "start_session" });
+    }
+
+    get currentSessionId() {
+        return this.sessionId;
+    }
+
+    onEvent(listener: EventListener) {
+        this.eventListeners.add(listener);
+        return () => this.eventListeners.delete(listener);
+    }
+
+    onStatus(listener: StatusListener) {
+        this.statusListeners.add(listener);
+        return () => this.statusListeners.delete(listener);
+    }
+
+    connect() {
+        if (this.closedByUser) return;
+        const state = this.ws?.readyState;
+        if (state === WebSocket.OPEN || state === WebSocket.CONNECTING) return;
+        this.closedByUser = false;
+        const url = agentWsUrl(this.agentUrl);
+        if (!url) {
+            if (this.debugEmbed) console.warn("[agent-embed][runtime] no WebSocket URL is available from auth yet");
+            // Not signed in: the auth listener connects once sign-in names the wsUrl.
+            this.setStatus("idle");
+            return;
+        }
+        this.setStatus(this.attempt === 0 ? "connecting" : "reconnecting");
+        if (this.debugEmbed) console.info("[agent-embed][runtime] opening WebSocket", { endpoint: this.safeEndpoint(url), attempt: this.attempt + 1 });
+
+        let ws: WebSocket;
+        try {
+            ws = new WebSocket(url);
+        } catch (error) {
+            if (this.debugEmbed) console.error("[agent-embed][runtime] WebSocket construction failed", { name: error instanceof Error ? error.name : "unknown", message: error instanceof Error ? error.message : String(error) });
+            this.scheduleReconnect();
+            return;
+        }
+        this.ws = ws;
+
+        ws.onopen = () => {
+            if (this.ws !== ws) return;
+            if (this.debugEmbed) console.info("[agent-embed][runtime] WebSocket open");
+            this.attempt = 0;
+            this.sessionReady = false;
+            this.setStatus("open");
+            this.openSession();
+        };
+
+        ws.onmessage = (message) => {
+            if (this.ws !== ws) return;
+            let frame: AgentWireFrame;
+            try {
+                frame = JSON.parse(message.data);
+            } catch {
+                return;
+            }
+            const eventType = frame.event_type ?? frame.type;
+            const payload = frame.event_data ?? frame.data;
+            if (this.debugEmbed) console.info("[agent-embed][runtime] WebSocket frame", { eventType, hasSessionId: !!(frame.session_id ?? payload?.session_id), isError: eventType === "error" });
+            if (eventType === "session_started") {
+                // After an agent restart the old session is gone and resume returns a new id.
+                this.sessionId = frame.session_id ?? payload?.session_id ?? null;
+                this.sessionReady = true;
+                this.flushQueue();
+            } else if (eventType === "error" && /agent token/i.test(String(payload?.error ?? ""))) {
+                // The agent forgot the token (idle 30 min or restarted): sign in again.
+                this.sessionReady = false;
+                if (this.unacknowledgedMessage) this.queue.push(this.unacknowledgedMessage);
+                this.unacknowledgedMessage = null;
+                clearAgentAuth(this.agentUrl);
+            } else if (eventType === "error" && !this.sessionReady) {
+                // Start/resume failed (e.g. auth); stop holding messages so their errors show.
+                this.sessionReady = true;
+                this.flushQueue();
+            }
+            if (eventType === "UserMessage" || eventType === "turn_complete" || eventType === "error") {
+                this.unacknowledgedMessage = null;
+            }
+            // Drop frames for a different session (e.g. a late event after a switch).
+            const frameSession = frame.session_id ?? payload?.session_id;
+            if (eventType !== "session_started" && frameSession && this.sessionId && frameSession !== this.sessionId) return;
+            this.eventListeners.forEach((listener) => listener(frame));
+        };
+
+        ws.onclose = (event) => {
+            if (this.ws !== ws) return;
+            if (this.debugEmbed) console.warn("[agent-embed][runtime] WebSocket closed", { code: event.code, reason: event.reason, clean: event.wasClean });
+            this.ws = null;
+            this.sessionReady = false;
+            if (this.closedByUser) {
+                this.setStatus("idle");
+                return;
+            }
+            this.scheduleReconnect();
+        };
+
+        ws.onerror = () => {
+            if (this.debugEmbed) console.error("[agent-embed][runtime] WebSocket error event");
+            // onclose follows and handles the reconnect.
+        };
+    }
+
+    /** Sends an action, or queues it until the socket and session are ready. */
+    send(action: AgentAction) {
+        if (this.closedByUser) return;
+        if (this.ws?.readyState === WebSocket.OPEN && this.sessionId && this.sessionReady) {
+            void this.sendRaw(action);
+        } else {
+            this.queue.push(action);
+            this.connect();
+        }
+    }
+
+    /** Starts a fresh conversation (drops the current session id). */
+    newSession() {
+        this.unacknowledgedMessage = null;
+        this.sessionId = null;
+        this.sessionReady = false;
+        this.queue = [];
+        if (this.ws?.readyState === WebSocket.OPEN) void this.sendRaw({ action: "start_session" });
+        else this.connect();
+    }
+
+    /** Switches to an existing conversation. */
+    resume(sessionId: string) {
+        this.sessionId = sessionId;
+        this.sessionReady = false;
+        if (this.ws?.readyState === WebSocket.OPEN) void this.sendRaw({ action: "resume_session", session_id: sessionId });
+        else this.connect();
+    }
+
+    /** Closes for good (the runtime is being disposed). */
+    close() {
+        this.offAuthChange();
+        this.closedByUser = true;
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = null;
+        this.ws?.close();
+        this.ws = null;
+    }
+
+    /** Drops the socket after sign-out; the next sign-in reconnects. */
+    private disconnect() {
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = null;
+        this.attempt = 0;
+        this.sessionReady = false;
+        if (this.ws) {
+            this.ws.onclose = null; // No reconnect.
+            this.ws.close();
+            this.ws = null;
+        }
+        this.setStatus("idle");
+    }
+
+    private flushQueue() {
+        const pending = this.queue;
+        this.queue = [];
+        pending.forEach((action) => {
+            // Queued messages were addressed before a session existed; point them at the current one.
+            const addressed = "session_id" in action && this.sessionId ? { ...action, session_id: this.sessionId } : action;
+            void this.sendRaw(addressed as AgentAction);
+        });
+    }
+
+    private async sendRaw(action: AgentAction) {
+        const agentToken = (await loadAgentAuth(this.agentUrl))?.agentToken;
+        if (!agentToken || this.ws?.readyState !== WebSocket.OPEN) {
+            if (this.debugEmbed) console.warn("[agent-embed][runtime] skipped outbound frame", { action: action.action, hasAgentToken: !!agentToken, socketOpen: this.ws?.readyState === WebSocket.OPEN });
+            if (action.action !== "start_session" && action.action !== "resume_session") this.queue.push(action);
+            return;
+        }
+        if (this.debugEmbed) console.info("[agent-embed][runtime] sending WebSocket action", { action: action.action });
+        this.ws.send(JSON.stringify({ ...action, agentToken }));
+        if (action.action === "message") this.unacknowledgedMessage = action;
+    }
+
+    private scheduleReconnect() {
+        if (this.timer) return;
+        const delay = BACKOFF_MS[Math.min(this.attempt, BACKOFF_MS.length - 1)];
+        this.attempt += 1;
+        this.setStatus(this.attempt > BACKOFF_MS.length ? "offline" : "reconnecting");
+        if (this.checkProcessAvailability && this.attempt >= 2 && this.attempt % 3 === 2) {
+            void this.checkAgentProcess(this.attempt);
+        }
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            this.connect();
+        }, delay);
+    }
+
+    private async checkAgentProcess(failedAttempt: number) {
+        if (this.checkingProcessAvailability) return;
+        this.checkingProcessAvailability = true;
+        try {
+            const auth = await loadAgentAuth(this.agentUrl);
+            if (!auth || this.closedByUser || this.attempt !== failedAttempt) return;
+            if (!(await isAgentProcessAvailable(auth)) && !this.closedByUser && this.attempt === failedAttempt) {
+                // Repeated WebSocket failures plus a failed process health check mean the stored
+                // endpoint is stale. Returning to sign-in lets the manager issue a fresh wsUrl.
+                clearAgentAuth(this.agentUrl);
+            }
+        } finally {
+            this.checkingProcessAvailability = false;
+        }
+    }
+
+    private setStatus(status: AgentConnection) {
+        if (this.debugEmbed) console.info("[agent-embed][runtime] connection status", { status });
+        this.statusListeners.forEach((listener) => listener(status));
+    }
+
+    private safeEndpoint(url = this.agentUrl) {
+        try {
+            const parsed = new URL(url);
+            return `${parsed.origin}${parsed.pathname}`;
+        } catch {
+            return "invalid-url";
+        }
+    }
+}

package/dist/components/core/solid-agent/client/agentUrls.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A chat's agent URL is the configured backend URL (used only to sign in), plus the agent it talks to
+ * when one is given (`<backend>?agentId=5`): required for the Agent Hub, optional for SolidX.
+ * Each agent URL has its own login.
+ */
+export declare function withAgentId(url: string, agentId?: number): string;
+/** The agent id named by an agent URL, if any. */
+export declare function agentIdOf(url: string): number | undefined;
+/** `http(s)://host[:port]` of the sign-in backend, from a configured agent URL (http or ws, trailing slash ok). */
+export declare function toHttpBase(url: string): string;
+//# sourceMappingURL=agentUrls.d.ts.map

package/dist/components/core/solid-agent/client/agentUrls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentUrls.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/client/agentUrls.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,kDAAkD;AAClD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGzD;AAED,mHAAmH;AACnH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9C"}

package/dist/components/core/solid-agent/client/agentUrls.js

@@ -0,0 +1,18 @@
+/**
+ * A chat's agent URL is the configured backend URL (used only to sign in), plus the agent it talks to
+ * when one is given (`<backend>?agentId=5`): required for the Agent Hub, optional for SolidX.
+ * Each agent URL has its own login.
+ */
+export function withAgentId(url, agentId) {
+    return agentId === undefined ? url : "".concat(toHttpBase(url), "?agentId=").concat(agentId);
+}
+/** The agent id named by an agent URL, if any. */
+export function agentIdOf(url) {
+    var match = url.match(/[?&]agentId=(\d+)/);
+    return match ? Number(match[1]) : undefined;
+}
+/** `http(s)://host[:port]` of the sign-in backend, from a configured agent URL (http or ws, trailing slash ok). */
+export function toHttpBase(url) {
+    return url.trim().split("?")[0].replace(/\/$/, "").replace(/^ws(s?):\/\//i, "http$1://");
+}
+//# sourceMappingURL=agentUrls.js.map

package/dist/components/core/solid-agent/client/agentUrls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentUrls.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/client/agentUrls.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,OAAgB;IACrD,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAG,UAAU,CAAC,GAAG,CAAC,sBAAY,OAAO,CAAE,CAAC;AACjF,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,SAAS,CAAC,GAAW;IACjC,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAChD,CAAC;AAED,mHAAmH;AACnH,MAAM,UAAU,UAAU,CAAC,GAAW;IAClC,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AAC7F,CAAC","sourcesContent":["/**\n * A chat's agent URL is the configured backend URL (used only to sign in), plus the agent it talks to\n * when one is given (`<backend>?agentId=5`): required for the Agent Hub, optional for SolidX.\n * Each agent URL has its own login.\n */\nexport function withAgentId(url: string, agentId?: number): string {\n    return agentId === undefined ? url : `${toHttpBase(url)}?agentId=${agentId}`;\n}\n\n/** The agent id named by an agent URL, if any. */\nexport function agentIdOf(url: string): number | undefined {\n    const match = url.match(/[?&]agentId=(\\d+)/);\n    return match ? Number(match[1]) : undefined;\n}\n\n/** `http(s)://host[:port]` of the sign-in backend, from a configured agent URL (http or ws, trailing slash ok). */\nexport function toHttpBase(url: string): string {\n    return url.trim().split(\"?\")[0].replace(/\\/$/, \"\").replace(/^ws(s?):\\/\\//i, \"http$1://\");\n}\n"]}

package/dist/components/core/solid-agent/client/agentUrls.ts

@@ -0,0 +1,19 @@
+/**
+ * A chat's agent URL is the configured backend URL (used only to sign in), plus the agent it talks to
+ * when one is given (`<backend>?agentId=5`): required for the Agent Hub, optional for SolidX.
+ * Each agent URL has its own login.
+ */
+export function withAgentId(url: string, agentId?: number): string {
+    return agentId === undefined ? url : `${toHttpBase(url)}?agentId=${agentId}`;
+}
+
+/** The agent id named by an agent URL, if any. */
+export function agentIdOf(url: string): number | undefined {
+    const match = url.match(/[?&]agentId=(\d+)/);
+    return match ? Number(match[1]) : undefined;
+}
+
+/** `http(s)://host[:port]` of the sign-in backend, from a configured agent URL (http or ws, trailing slash ok). */
+export function toHttpBase(url: string): string {
+    return url.trim().split("?")[0].replace(/\/$/, "").replace(/^ws(s?):\/\//i, "http$1://");
+}

package/dist/components/core/solid-agent/composer/AgentComposer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { AgentAttachment, AgentCommand } from "../types";
+type Props = {
+    working: boolean;
+    disabled: boolean;
+    placeholder?: string;
+    commands: AgentCommand[];
+    /** Text to place in the box (e.g. a prefilled prompt); changing `seedKey` re-applies it. */
+    seed?: string;
+    seedKey?: number;
+    onSend: (text: string, attachments: AgentAttachment[]) => void | Promise<void>;
+    onStop: () => void;
+    modelIndicator?: React.ReactNode;
+};
+/**
+ * Message box: Enter sends, Shift+Enter adds a line, "/" at the start lists the agent's commands.
+ * Files can be attached with the paperclip, dropped onto the box, or pasted.
+ */
+export declare function AgentComposer({ working, disabled, placeholder, commands, seed, seedKey, onSend, onStop, modelIndicator }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentComposer.d.ts.map

package/dist/components/core/solid-agent/composer/AgentComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/composer/AgentComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG9D,KAAK,KAAK,GAAG;IACT,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,KAAK,2CAyN/H"}

package/dist/components/core/solid-agent/composer/AgentComposer.js

@@ -0,0 +1,219 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ArrowUp, FileText, Paperclip, Square, X } from "lucide-react";
+import styles from "../SolidAgent.module.css";
+import { AGENT_ATTACHMENT_ACCEPT, MAX_AGENT_ATTACHMENTS, formatFileSize, readAgentAttachments } from "../agentAttachments";
+/**
+ * Message box: Enter sends, Shift+Enter adds a line, "/" at the start lists the agent's commands.
+ * Files can be attached with the paperclip, dropped onto the box, or pasted.
+ */
+export function AgentComposer(_a) {
+    var _this = this;
+    var working = _a.working, disabled = _a.disabled, placeholder = _a.placeholder, commands = _a.commands, seed = _a.seed, seedKey = _a.seedKey, onSend = _a.onSend, onStop = _a.onStop, modelIndicator = _a.modelIndicator;
+    var _b = useState(""), text = _b[0], setText = _b[1];
+    var _c = useState(0), active = _c[0], setActive = _c[1];
+    var _d = useState([]), attachments = _d[0], setAttachments = _d[1];
+    var _e = useState([]), attachErrors = _e[0], setAttachErrors = _e[1];
+    var _f = useState(false), dragging = _f[0], setDragging = _f[1];
+    var _g = useState(false), sending = _g[0], setSending = _g[1];
+    var ref = useRef(null);
+    var fileInputRef = useRef(null);
+    useEffect(function () {
+        if (seed == null)
+            return;
+        setText(seed);
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            autosize();
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [seedKey]);
+    useEffect(function () {
+        var _a;
+        if (!disabled)
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [disabled]);
+    var slashQuery = text.startsWith("/") && !text.includes(" ") ? text.slice(1).toLowerCase() : null;
+    var matches = useMemo(function () { return (slashQuery == null ? [] : commands.filter(function (cmd) { return cmd.name.replace(/^\//, "").toLowerCase().startsWith(slashQuery); })); }, [commands, slashQuery]);
+    function autosize() {
+        var el = ref.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        el.style.height = "".concat(Math.min(el.scrollHeight, 200), "px");
+    }
+    var addFiles = function (files) { return __awaiter(_this, void 0, void 0, function () {
+        var _a, added, errors;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!files.length || disabled || sending)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, readAgentAttachments(files, attachments)];
+                case 1:
+                    _a = _b.sent(), added = _a.added, errors = _a.errors;
+                    if (added.length)
+                        setAttachments(function (prev) { return __spreadArray(__spreadArray([], prev, true), added, true); });
+                    setAttachErrors(errors);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var removeAttachment = function (index) {
+        setAttachments(function (prev) { return prev.filter(function (_, i) { return i !== index; }); });
+        setAttachErrors([]);
+    };
+    var canSend = (!!text.trim() || attachments.length > 0) && !working && !disabled && !sending;
+    var submit = function () { return __awaiter(_this, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!canSend)
+                        return [2 /*return*/];
+                    setSending(true);
+                    setAttachErrors([]);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, onSend(text.trim(), attachments)];
+                case 2:
+                    _a.sent();
+                    setText("");
+                    setAttachments([]);
+                    requestAnimationFrame(autosize);
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _a.sent();
+                    setAttachErrors([error_1 instanceof Error ? error_1.message : "The message could not be sent."]);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setSending(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var pickCommand = function (cmd) {
+        var _a;
+        setText("/".concat(cmd.name.replace(/^\//, ""), " "));
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var onKeyDown = function (event) {
+        if (matches.length) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setActive(function (i) { return (i + (event.key === "ArrowDown" ? 1 : -1) + matches.length) % matches.length; });
+                return;
+            }
+            if (event.key === "Tab" || (event.key === "Enter" && !event.shiftKey)) {
+                event.preventDefault();
+                pickCommand(matches[Math.min(active, matches.length - 1)]);
+                return;
+            }
+        }
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            submit();
+        }
+    };
+    var onPaste = function (event) {
+        var _a, _b;
+        var files = Array.from((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        if (files.length) {
+            event.preventDefault();
+            void addFiles(files);
+        }
+    };
+    var dropHandlers = {
+        onDragOver: function (event) {
+            var _a, _b;
+            if (disabled || sending || !((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes("Files")))
+                return;
+            event.preventDefault();
+            setDragging(true);
+        },
+        onDragLeave: function (event) {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setDragging(false);
+        },
+        onDrop: function (event) {
+            var _a, _b;
+            if (disabled || sending)
+                return;
+            event.preventDefault();
+            setDragging(false);
+            void addFiles(Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []));
+        },
+    };
+    return (_jsxs("div", __assign({ className: "".concat(styles.composer, " ").concat(dragging ? styles.composerDragging : "") }, dropHandlers, { children: [matches.length > 0 && (_jsx("div", { className: styles.popover, role: "listbox", "aria-label": "Commands", children: matches.map(function (cmd, i) { return (_jsxs("button", { type: "button", role: "option", "aria-selected": i === active, className: "".concat(styles.popoverItem, " ").concat(i === active ? styles.popoverItemActive : ""), onMouseDown: function (event) {
+                        event.preventDefault();
+                        pickCommand(cmd);
+                    }, children: [_jsxs("span", { className: styles.popoverCmd, children: ["/", cmd.name.replace(/^\//, "")] }), cmd.description && _jsx("span", { className: styles.popoverDesc, children: cmd.description })] }, cmd.name)); }) })), attachments.length > 0 && (_jsx("ul", { className: styles.attachmentTray, "aria-label": "Attached files", children: attachments.map(function (item, index) { return (_jsxs("li", { className: styles.attachmentChip, children: [item.meta.previewUrl ? (_jsx("img", { className: styles.attachmentThumb, src: item.meta.previewUrl, alt: "" })) : (_jsx("span", { className: styles.attachmentIcon, children: _jsx(FileText, { size: 14 }) })), _jsxs("span", { className: styles.attachmentText, children: [_jsx("span", { className: styles.attachmentName, title: item.meta.name, children: item.meta.name }), _jsx("span", { className: styles.attachmentSize, children: formatFileSize(item.meta.size) })] }), _jsx("button", { type: "button", className: styles.attachmentRemove, "aria-label": "Remove ".concat(item.meta.name), onClick: function () { return removeAttachment(index); }, children: _jsx(X, { size: 12 }) })] }, "".concat(item.meta.name, "-").concat(index))); }) })), attachErrors.length > 0 && (_jsx("div", { className: styles.attachmentErrors, role: "alert", children: attachErrors.map(function (error) { return _jsx("div", { children: error }, error); }) })), _jsx("textarea", { ref: ref, className: styles.textarea, rows: 1, value: text, disabled: disabled || sending, "aria-label": "Message the SolidX Agent", placeholder: dragging ? "Drop files to attach" : placeholder !== null && placeholder !== void 0 ? placeholder : "Ask the agent…", onChange: function (event) {
+                    setText(event.target.value);
+                    setActive(0);
+                    autosize();
+                }, onKeyDown: onKeyDown, onPaste: onPaste }), _jsxs("div", { className: styles.composerRow, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: AGENT_ATTACHMENT_ACCEPT, hidden: true, onChange: function (event) {
+                            var _a;
+                            void addFiles(Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []));
+                            event.target.value = "";
+                        } }), _jsx("button", { type: "button", className: styles.iconBtn, "aria-label": "Attach files", title: "Attach files (up to ".concat(MAX_AGENT_ATTACHMENTS, ": images or text files)"), disabled: disabled || sending || attachments.length >= MAX_AGENT_ATTACHMENTS, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: _jsx(Paperclip, { size: 16 }) }), modelIndicator, working ? (_jsxs("button", { type: "button", className: styles.stopBtn, onClick: onStop, "aria-label": "Stop the agent", children: [_jsx(Square, { size: 10, fill: "currentColor" }), " Stop"] })) : (_jsx("button", { type: "button", className: styles.sendBtn, onClick: submit, disabled: !canSend, "aria-label": "Send", children: _jsx(ArrowUp, { size: 16 }) }))] })] })));
+}
+//# sourceMappingURL=AgentComposer.js.map

package/dist/components/core/solid-agent/composer/AgentComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposer.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/composer/AgentComposer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAe3H;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAAkG;IAAhI,iBAyNC;QAzN+B,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,cAAc,oBAAA;IAC7G,IAAA,KAAkB,QAAQ,CAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAC;IAC/B,IAAA,KAAsB,QAAQ,CAAC,CAAC,CAAC,EAAhC,MAAM,QAAA,EAAE,SAAS,QAAe,CAAC;IAClC,IAAA,KAAgC,QAAQ,CAAoB,EAAE,CAAC,EAA9D,WAAW,QAAA,EAAE,cAAc,QAAmC,CAAC;IAChE,IAAA,KAAkC,QAAQ,CAAW,EAAE,CAAC,EAAvD,YAAY,QAAA,EAAE,eAAe,QAA0B,CAAC;IACzD,IAAA,KAA0B,QAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAC1C,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,IAAM,GAAG,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC9C,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC;QACN,IAAI,IAAI,IAAI,IAAI;YAAE,OAAO;QACzB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,qBAAqB,CAAC;;YAClB,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YACrB,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC,CAAC;QACH,uDAAuD;IAC3D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;;QACN,IAAI,CAAC,QAAQ;YAAE,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACpG,IAAM,OAAO,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAhE,CAAgE,CAAC,CAAC,EAAtH,CAAsH,EAC5H,CAAC,QAAQ,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,SAAS,QAAQ;QACb,IAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,UAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,OAAI,CAAC;IAC5D,CAAC;IAED,IAAM,QAAQ,GAAG,UAAO,KAAa;;;;;oBACjC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,QAAQ,IAAI,OAAO;wBAAE,sBAAO;oBACvB,qBAAM,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC,EAAA;;oBAAlE,KAAoB,SAA8C,EAAhE,KAAK,WAAA,EAAE,MAAM,YAAA;oBACrB,IAAI,KAAK,CAAC,MAAM;wBAAE,cAAc,CAAC,UAAC,IAAI,IAAK,uCAAI,IAAI,SAAK,KAAK,SAAlB,CAAmB,CAAC,CAAC;oBAChE,eAAe,CAAC,MAAM,CAAC,CAAC;;;;SAC3B,CAAC;IAEF,IAAM,gBAAgB,GAAG,UAAC,KAAa;QACnC,cAAc,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,EAAlC,CAAkC,CAAC,CAAC;QAC7D,eAAe,CAAC,EAAE,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC;IAE/F,IAAM,MAAM,GAAG;;;;;oBACX,IAAI,CAAC,OAAO;wBAAE,sBAAO;oBACrB,UAAU,CAAC,IAAI,CAAC,CAAC;oBACjB,eAAe,CAAC,EAAE,CAAC,CAAC;;;;oBAEhB,qBAAM,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,WAAW,CAAC,EAAA;;oBAAtC,SAAsC,CAAC;oBACvC,OAAO,CAAC,EAAE,CAAC,CAAC;oBACZ,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;;;;oBAEhC,eAAe,CAAC,CAAC,OAAK,YAAY,KAAK,CAAC,CAAC,CAAC,OAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC;;;oBAE7F,UAAU,CAAC,KAAK,CAAC,CAAC;;;;;SAEzB,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAiB;;QAClC,OAAO,CAAC,WAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,MAAG,CAAC,CAAC;QAC5C,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,KAA+C;QAC9D,IAAI,OAAO,CAAC,MAAM,EAAE;YAChB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;gBACtD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,SAAS,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,EAA5E,CAA4E,CAAC,CAAC;gBAC/F,OAAO;aACV;YACD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;gBACnE,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3D,OAAO;aACV;SACJ;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,EAAE,CAAC;SACZ;IACL,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,UAAC,KAAgD;;QAC7D,IAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,KAAK,mCAAI,EAAE,CAAC,CAAC;QAC3D,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC;SACxB;IACL,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG;QACjB,UAAU,EAAE,UAAC,KAAsB;;YAC/B,IAAI,QAAQ,IAAI,OAAO,IAAI,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,0CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;gBAAE,OAAO;YACjF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,WAAW,EAAE,UAAC,KAAsB;YAChC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC;gBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QACvF,CAAC;QACD,MAAM,EAAE,UAAC,KAAsB;;YAC3B,IAAI,QAAQ,IAAI,OAAO;gBAAE,OAAO;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,MAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,mCAAI,EAAE,CAAC,CAAC,CAAC;QAC/D,CAAC;KACJ,CAAC;IAEF,OAAO,CACH,wBAAK,SAAS,EAAE,UAAG,MAAM,CAAC,QAAQ,cAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAE,IAAM,YAAY,eAC5F,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,gBAAY,UAAU,YAC/D,OAAO,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,CAAC,IAAK,OAAA,CACrB,kBAEI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,CAAC,KAAK,MAAM,EAC3B,SAAS,EAAE,UAAG,MAAM,CAAC,WAAW,cAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAE,EAClF,WAAW,EAAE,UAAC,KAAK;wBACf,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,WAAW,CAAC,GAAG,CAAC,CAAC;oBACrB,CAAC,aAED,gBAAM,SAAS,EAAE,MAAM,CAAC,UAAU,kBAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,IAAQ,EACxE,GAAG,CAAC,WAAW,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,GAAG,CAAC,WAAW,GAAQ,KAX5E,GAAG,CAAC,IAAI,CAYR,CACZ,EAfwB,CAexB,CAAC,GACA,CACT,EAEA,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,aAAI,SAAS,EAAE,MAAM,CAAC,cAAc,gBAAa,gBAAgB,YAC5D,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAC9B,cAAuC,SAAS,EAAE,MAAM,CAAC,cAAc,aAClE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACpB,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC/E,CAAC,CAAC,CAAC,CACA,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAAO,CACxE,EACD,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,aAClC,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAQ,EACtF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAQ,IAC5E,EACP,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,gBAAc,iBAAU,IAAI,CAAC,IAAI,CAAC,IAAI,CAAE,EAAE,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,YACpI,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACV,KAZJ,UAAG,IAAI,CAAC,IAAI,CAAC,IAAI,cAAI,KAAK,CAAE,CAahC,CACR,EAfiC,CAejC,CAAC,GACD,CACR,EAEA,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,IAAI,EAAC,OAAO,YAChD,YAAY,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,wBAAkB,KAAK,IAAb,KAAK,CAAe,EAA9B,CAA8B,CAAC,GAC1D,CACT,EAED,mBACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,IAAI,OAAO,gBAClB,0BAA0B,EACrC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,gBAAgB,EAChF,QAAQ,EAAE,UAAC,KAAK;oBACZ,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC5B,SAAS,CAAC,CAAC,CAAC,CAAC;oBACb,QAAQ,EAAE,CAAC;gBACf,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,GAClB,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC9B,gBACI,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,MAAM,EAAE,uBAAuB,EAC/B,MAAM,QACN,QAAQ,EAAE,UAAC,KAAK;;4BACZ,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,CAAC;4BACpD,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;wBAC5B,CAAC,GACH,EACF,iBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,OAAO,gBACd,cAAc,EACzB,KAAK,EAAE,8BAAuB,qBAAqB,4BAAyB,EAC5E,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI,WAAW,CAAC,MAAM,IAAI,qBAAqB,EAC5E,OAAO,EAAE,sBAAM,OAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,YAE5C,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,EACR,cAAc,EACd,OAAO,CAAC,CAAC,CAAC,CACP,kBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAa,gBAAgB,aACzF,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,aACnC,CACZ,CAAC,CAAC,CAAC,CACA,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,gBAAa,MAAM,YACnG,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,GAChB,CACZ,IACC,KACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ArrowUp, FileText, Paperclip, Square, X } from \"lucide-react\";\nimport styles from \"../SolidAgent.module.css\";\nimport type { AgentAttachment, AgentCommand } from \"../types\";\nimport { AGENT_ATTACHMENT_ACCEPT, MAX_AGENT_ATTACHMENTS, formatFileSize, readAgentAttachments } from \"../agentAttachments\";\n\ntype Props = {\n    working: boolean;\n    disabled: boolean;\n    placeholder?: string;\n    commands: AgentCommand[];\n    /** Text to place in the box (e.g. a prefilled prompt); changing `seedKey` re-applies it. */\n    seed?: string;\n    seedKey?: number;\n    onSend: (text: string, attachments: AgentAttachment[]) => void | Promise<void>;\n    onStop: () => void;\n    modelIndicator?: React.ReactNode;\n};\n\n/**\n * Message box: Enter sends, Shift+Enter adds a line, \"/\" at the start lists the agent's commands.\n * Files can be attached with the paperclip, dropped onto the box, or pasted.\n */\nexport function AgentComposer({ working, disabled, placeholder, commands, seed, seedKey, onSend, onStop, modelIndicator }: Props) {\n    const [text, setText] = useState(\"\");\n    const [active, setActive] = useState(0);\n    const [attachments, setAttachments] = useState<AgentAttachment[]>([]);\n    const [attachErrors, setAttachErrors] = useState<string[]>([]);\n    const [dragging, setDragging] = useState(false);\n    const [sending, setSending] = useState(false);\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (seed == null) return;\n        setText(seed);\n        requestAnimationFrame(() => {\n            ref.current?.focus();\n            autosize();\n        });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [seedKey]);\n\n    useEffect(() => {\n        if (!disabled) ref.current?.focus();\n    }, [disabled]);\n\n    const slashQuery = text.startsWith(\"/\") && !text.includes(\" \") ? text.slice(1).toLowerCase() : null;\n    const matches = useMemo(\n        () => (slashQuery == null ? [] : commands.filter((cmd) => cmd.name.replace(/^\\//, \"\").toLowerCase().startsWith(slashQuery))),\n        [commands, slashQuery],\n    );\n\n    function autosize() {\n        const el = ref.current;\n        if (!el) return;\n        el.style.height = \"auto\";\n        el.style.height = `${Math.min(el.scrollHeight, 200)}px`;\n    }\n\n    const addFiles = async (files: File[]) => {\n        if (!files.length || disabled || sending) return;\n        const { added, errors } = await readAgentAttachments(files, attachments);\n        if (added.length) setAttachments((prev) => [...prev, ...added]);\n        setAttachErrors(errors);\n    };\n\n    const removeAttachment = (index: number) => {\n        setAttachments((prev) => prev.filter((_, i) => i !== index));\n        setAttachErrors([]);\n    };\n\n    const canSend = (!!text.trim() || attachments.length > 0) && !working && !disabled && !sending;\n\n    const submit = async () => {\n        if (!canSend) return;\n        setSending(true);\n        setAttachErrors([]);\n        try {\n            await onSend(text.trim(), attachments);\n            setText(\"\");\n            setAttachments([]);\n            requestAnimationFrame(autosize);\n        } catch (error) {\n            setAttachErrors([error instanceof Error ? error.message : \"The message could not be sent.\"]);\n        } finally {\n            setSending(false);\n        }\n    };\n\n    const pickCommand = (cmd: AgentCommand) => {\n        setText(`/${cmd.name.replace(/^\\//, \"\")} `);\n        ref.current?.focus();\n    };\n\n    const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (matches.length) {\n            if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                event.preventDefault();\n                setActive((i) => (i + (event.key === \"ArrowDown\" ? 1 : -1) + matches.length) % matches.length);\n                return;\n            }\n            if (event.key === \"Tab\" || (event.key === \"Enter\" && !event.shiftKey)) {\n                event.preventDefault();\n                pickCommand(matches[Math.min(active, matches.length - 1)]);\n                return;\n            }\n        }\n        if (event.key === \"Enter\" && !event.shiftKey) {\n            event.preventDefault();\n            submit();\n        }\n    };\n\n    const onPaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        const files = Array.from(event.clipboardData?.files ?? []);\n        if (files.length) {\n            event.preventDefault();\n            void addFiles(files);\n        }\n    };\n\n    const dropHandlers = {\n        onDragOver: (event: React.DragEvent) => {\n            if (disabled || sending || !event.dataTransfer?.types?.includes(\"Files\")) return;\n            event.preventDefault();\n            setDragging(true);\n        },\n        onDragLeave: (event: React.DragEvent) => {\n            if (!event.currentTarget.contains(event.relatedTarget as Node)) setDragging(false);\n        },\n        onDrop: (event: React.DragEvent) => {\n            if (disabled || sending) return;\n            event.preventDefault();\n            setDragging(false);\n            void addFiles(Array.from(event.dataTransfer?.files ?? []));\n        },\n    };\n\n    return (\n        <div className={`${styles.composer} ${dragging ? styles.composerDragging : \"\"}`} {...dropHandlers}>\n            {matches.length > 0 && (\n                <div className={styles.popover} role=\"listbox\" aria-label=\"Commands\">\n                    {matches.map((cmd, i) => (\n                        <button\n                            key={cmd.name}\n                            type=\"button\"\n                            role=\"option\"\n                            aria-selected={i === active}\n                            className={`${styles.popoverItem} ${i === active ? styles.popoverItemActive : \"\"}`}\n                            onMouseDown={(event) => {\n                                event.preventDefault();\n                                pickCommand(cmd);\n                            }}\n                        >\n                            <span className={styles.popoverCmd}>/{cmd.name.replace(/^\\//, \"\")}</span>\n                            {cmd.description && <span className={styles.popoverDesc}>{cmd.description}</span>}\n                        </button>\n                    ))}\n                </div>\n            )}\n\n            {attachments.length > 0 && (\n                <ul className={styles.attachmentTray} aria-label=\"Attached files\">\n                    {attachments.map((item, index) => (\n                        <li key={`${item.meta.name}-${index}`} className={styles.attachmentChip}>\n                            {item.meta.previewUrl ? (\n                                <img className={styles.attachmentThumb} src={item.meta.previewUrl} alt=\"\" />\n                            ) : (\n                                <span className={styles.attachmentIcon}><FileText size={14} /></span>\n                            )}\n                            <span className={styles.attachmentText}>\n                                <span className={styles.attachmentName} title={item.meta.name}>{item.meta.name}</span>\n                                <span className={styles.attachmentSize}>{formatFileSize(item.meta.size)}</span>\n                            </span>\n                            <button type=\"button\" className={styles.attachmentRemove} aria-label={`Remove ${item.meta.name}`} onClick={() => removeAttachment(index)}>\n                                <X size={12} />\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            )}\n\n            {attachErrors.length > 0 && (\n                <div className={styles.attachmentErrors} role=\"alert\">\n                    {attachErrors.map((error) => <div key={error}>{error}</div>)}\n                </div>\n            )}\n\n            <textarea\n                ref={ref}\n                className={styles.textarea}\n                rows={1}\n                value={text}\n                disabled={disabled || sending}\n                aria-label=\"Message the SolidX Agent\"\n                placeholder={dragging ? \"Drop files to attach\" : placeholder ?? \"Ask the agent…\"}\n                onChange={(event) => {\n                    setText(event.target.value);\n                    setActive(0);\n                    autosize();\n                }}\n                onKeyDown={onKeyDown}\n                onPaste={onPaste}\n            />\n            <div className={styles.composerRow}>\n                <input\n                    ref={fileInputRef}\n                    type=\"file\"\n                    multiple\n                    accept={AGENT_ATTACHMENT_ACCEPT}\n                    hidden\n                    onChange={(event) => {\n                        void addFiles(Array.from(event.target.files ?? []));\n                        event.target.value = \"\";\n                    }}\n                />\n                <button\n                    type=\"button\"\n                    className={styles.iconBtn}\n                    aria-label=\"Attach files\"\n                    title={`Attach files (up to ${MAX_AGENT_ATTACHMENTS}: images or text files)`}\n                    disabled={disabled || sending || attachments.length >= MAX_AGENT_ATTACHMENTS}\n                    onClick={() => fileInputRef.current?.click()}\n                >\n                    <Paperclip size={16} />\n                </button>\n                {modelIndicator}\n                {working ? (\n                    <button type=\"button\" className={styles.stopBtn} onClick={onStop} aria-label=\"Stop the agent\">\n                        <Square size={10} fill=\"currentColor\" /> Stop\n                    </button>\n                ) : (\n                    <button type=\"button\" className={styles.sendBtn} onClick={submit} disabled={!canSend} aria-label=\"Send\">\n                        <ArrowUp size={16} />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n}\n"]}