@ghostchain1/ghostcopilot-react 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GhostChain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# @ghostchain1/ghostcopilot-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+GhostCopilot React — Floating AI chat widget for GhostCloud apps
+
+## Installation
+
+```bash
+npm install @ghostchain1/ghostcopilot-react
+```
+
+## Usage
+
+```ts
+import { /* see exports */ } from "@ghostchain1/ghostcopilot-react";
+```
+
+Part of the [GhostOS](https://github.com/ghostmode25/GhostOS) monorepo.
+
+## License
+
+MIT

package/dist/ChatWidget.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GhostCopilot — Chat Widget UI Component
+ *
+ * Renders the floating chat interface: message thread + input.
+ * Designed to be embedded in a floating panel by GhostCopilot.tsx.
+ */
+import type { ChatMessage } from "./useGhostCopilot.js";
+interface ChatWidgetProps {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: string | null;
+    onSend: (content: string) => void;
+    onClear: () => void;
+}
+export declare function ChatWidget({ messages, isLoading, error, onSend, onClear }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ChatWidget.js

@@ -0,0 +1,100 @@
+/**
+ * GhostCopilot — Chat Widget UI Component
+ *
+ * Renders the floating chat interface: message thread + input.
+ * Designed to be embedded in a floating panel by GhostCopilot.tsx.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+export function ChatWidget({ messages, isLoading, error, onSend, onClear }) {
+    const [input, setInput] = React.useState("");
+    const bottomRef = useRef(null);
+    const inputRef = useRef(null);
+    // Auto-scroll to bottom on new messages
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const text = input.trim();
+        if (!text || isLoading)
+            return;
+        setInput("");
+        onSend(text);
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            fontFamily: "system-ui, sans-serif",
+            fontSize: "14px",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "10px 14px",
+                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                    color: "#fff",
+                    borderRadius: "12px 12px 0 0",
+                    fontWeight: 600,
+                }, children: [_jsx("span", { children: "\u26A1 GhostCopilot" }), _jsx("button", { onClick: onClear, title: "Clear chat", style: {
+                            background: "transparent",
+                            border: "none",
+                            color: "rgba(255,255,255,0.8)",
+                            cursor: "pointer",
+                            fontSize: "18px",
+                            lineHeight: 1,
+                            padding: "2px 4px",
+                        }, "aria-label": "Clear chat", children: "\u00D7" })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "12px",
+                    background: "#0f0f13",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px",
+                }, children: [messages.length === 0 && !isLoading && (_jsxs("div", { style: { color: "#6b7280", textAlign: "center", marginTop: "40px" }, children: ["Ask me anything about GhostChain!", _jsx("br", {}), _jsx("small", { style: { opacity: 0.6 }, children: "swap, bridge, governance, analytics\u2026" })] })), messages.map((msg) => (_jsx(MessageBubble, { message: msg }, msg.id))), isLoading && messages[messages.length - 1]?.content === "" && (_jsx("div", { style: { color: "#6b7280", fontStyle: "italic" }, children: "GhostCopilot is thinking\u2026" })), error && _jsx("div", { style: { color: "#f87171", fontSize: "12px" }, children: error }), _jsx("div", { ref: bottomRef })] }), _jsxs("form", { onSubmit: handleSubmit, style: {
+                    display: "flex",
+                    gap: "8px",
+                    padding: "10px",
+                    background: "#1a1a2e",
+                    borderRadius: "0 0 12px 12px",
+                    borderTop: "1px solid #2d2d44",
+                }, children: [_jsx("input", { ref: inputRef, type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: "Ask GhostCopilot\u2026", disabled: isLoading, style: {
+                            flex: 1,
+                            background: "#0f0f1a",
+                            border: "1px solid #3d3d5c",
+                            borderRadius: "8px",
+                            padding: "8px 12px",
+                            color: "#e0e0ff",
+                            outline: "none",
+                            fontSize: "13px",
+                        }, "aria-label": "Chat input" }), _jsx("button", { type: "submit", disabled: isLoading || !input.trim(), style: {
+                            background: isLoading ? "#4b5563" : "#6366f1",
+                            border: "none",
+                            borderRadius: "8px",
+                            padding: "8px 14px",
+                            color: "#fff",
+                            cursor: isLoading ? "not-allowed" : "pointer",
+                            fontWeight: 600,
+                            fontSize: "13px",
+                            transition: "background 0.2s",
+                        }, "aria-label": "Send message", children: isLoading ? "…" : "Send" })] })] }));
+}
+function MessageBubble({ message }) {
+    const isUser = message.role === "user";
+    return (_jsx("div", { style: {
+            display: "flex",
+            justifyContent: isUser ? "flex-end" : "flex-start",
+        }, children: _jsx("div", { style: {
+                maxWidth: "85%",
+                padding: "8px 12px",
+                borderRadius: isUser ? "12px 12px 2px 12px" : "12px 12px 12px 2px",
+                background: isUser ? "#4f46e5" : "#1e1e2e",
+                color: isUser ? "#fff" : "#c9d1d9",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+                lineHeight: 1.5,
+            }, children: message.content || _jsx("span", { style: { opacity: 0.4 }, children: "\u258C" }) }) }));
+}

package/dist/GhostCopilot.d.ts

@@ -0,0 +1,21 @@
+/**
+ * GhostCopilot — Floating Widget Shell Component
+ *
+ * Renders a floating action button (FAB) in the bottom-right corner.
+ * Clicking expands a chat panel. All state managed via useGhostCopilot hook.
+ */
+export interface GhostCopilotProps {
+    /** GhostCopilot service URL. Defaults to process.env.NEXT_PUBLIC_GHOSTCOPILOT_URL */
+    serviceUrl?: string;
+    /** Connected wallet address (optional, for personalised context) */
+    walletAddress?: string;
+    /** Chain ID context. Defaults to 14000301 */
+    chainId?: number;
+    /** Width of the chat panel in pixels. Default 380 */
+    panelWidth?: number;
+    /** Height of the chat panel in pixels. Default 520 */
+    panelHeight?: number;
+    /** CSS z-index for the widget. Default 9999 */
+    zIndex?: number;
+}
+export declare function GhostCopilot({ serviceUrl, walletAddress, chainId, panelWidth, panelHeight, zIndex, }: GhostCopilotProps): import("react/jsx-runtime").JSX.Element;

package/dist/GhostCopilot.js

@@ -0,0 +1,62 @@
+/**
+ * GhostCopilot — Floating Widget Shell Component
+ *
+ * Renders a floating action button (FAB) in the bottom-right corner.
+ * Clicking expands a chat panel. All state managed via useGhostCopilot hook.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { useGhostCopilot } from "./useGhostCopilot.js";
+import { ChatWidget } from "./ChatWidget.js";
+export function GhostCopilot({ serviceUrl, walletAddress, chainId, panelWidth = 380, panelHeight = 520, zIndex = 9999, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const { messages, isLoading, error, sendMessage, clearMessages } = useGhostCopilot({
+        serviceUrl,
+        walletAddress,
+        chainId,
+    });
+    const handleClear = () => {
+        clearMessages();
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { style: {
+            position: "fixed",
+            bottom: "24px",
+            right: "24px",
+            zIndex,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: "12px",
+        }, children: [isOpen && (_jsx("div", { style: {
+                    width: `${panelWidth}px`,
+                    height: `${panelHeight}px`,
+                    background: "#0f0f13",
+                    borderRadius: "12px",
+                    boxShadow: "0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.3)",
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    animation: "ghostcopilot-slide-up 0.2s ease-out",
+                }, children: _jsx(ChatWidget, { messages: messages, isLoading: isLoading, error: error, onSend: sendMessage, onClear: handleClear }) })), _jsx("button", { onClick: () => setIsOpen((v) => !v), "aria-label": isOpen ? "Close GhostCopilot" : "Open GhostCopilot", style: {
+                    width: "56px",
+                    height: "56px",
+                    borderRadius: "50%",
+                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxShadow: "0 4px 20px rgba(99,102,241,0.5)",
+                    fontSize: "24px",
+                    transition: "transform 0.2s, box-shadow 0.2s",
+                    transform: isOpen ? "rotate(45deg)" : "none",
+                }, title: isOpen ? "Close GhostCopilot" : "Chat with GhostCopilot AI", children: isOpen ? "✕" : "⚡" }), _jsx("style", { children: `
+        @keyframes ghostcopilot-slide-up {
+          from { opacity: 0; transform: translateY(20px) scale(0.96); }
+          to   { opacity: 1; transform: translateY(0)     scale(1);    }
+        }
+      ` })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { GhostCopilot } from "./GhostCopilot.js";
+export { ChatWidget } from "./ChatWidget.js";
+export { useGhostCopilot } from "./useGhostCopilot.js";
+export type { GhostCopilotProps } from "./GhostCopilot.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+// Public API surface for @ghostchain1/ghostcopilot-react
+export { GhostCopilot } from "./GhostCopilot.js";
+export { ChatWidget } from "./ChatWidget.js";
+export { useGhostCopilot } from "./useGhostCopilot.js";

package/dist/useGhostCopilot.d.ts

@@ -0,0 +1,28 @@
+/**
+ * useGhostCopilot — React hook for GhostCopilot SSE streaming
+ *
+ * Manages chat state, sends messages, and reads SSE chunks.
+ */
+export interface ChatMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    timestamp: number;
+}
+interface UseGhostCopilotOptions {
+    /** Base URL of the GhostCopilot service. Defaults to NEXT_PUBLIC_GHOSTCOPILOT_URL env var */
+    serviceUrl?: string;
+    /** Optional connected wallet address for personalised context */
+    walletAddress?: string;
+    /** Chain ID for context. Defaults to 14000301 (L1) */
+    chainId?: number;
+}
+interface UseGhostCopilotReturn {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: string | null;
+    sendMessage: (content: string) => Promise<void>;
+    clearMessages: () => void;
+}
+export declare function useGhostCopilot(options?: UseGhostCopilotOptions): UseGhostCopilotReturn;
+export {};

package/dist/useGhostCopilot.js

@@ -0,0 +1,107 @@
+/**
+ * useGhostCopilot — React hook for GhostCopilot SSE streaming
+ *
+ * Manages chat state, sends messages, and reads SSE chunks.
+ */
+"use client";
+import { useState, useCallback, useRef } from "react";
+function generateId() {
+    return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+export function useGhostCopilot(options = {}) {
+    const serviceUrl = options.serviceUrl ??
+        (typeof process !== "undefined" ? process.env["NEXT_PUBLIC_GHOSTCOPILOT_URL"] : undefined) ??
+        "http://localhost:9200";
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const abortRef = useRef(null);
+    const sendMessage = useCallback(async (content) => {
+        if (!content.trim())
+            return;
+        // Cancel any in-flight request
+        abortRef.current?.abort();
+        abortRef.current = new AbortController();
+        const userMsg = {
+            id: generateId(),
+            role: "user",
+            content: content.trim(),
+            timestamp: Date.now(),
+        };
+        setMessages((prev) => [...prev, userMsg]);
+        setIsLoading(true);
+        setError(null);
+        const assistantId = generateId();
+        // Optimistically add empty assistant message for streaming
+        setMessages((prev) => [
+            ...prev,
+            { id: assistantId, role: "assistant", content: "", timestamp: Date.now() },
+        ]);
+        try {
+            const conversationHistory = [
+                ...messages.map((m) => ({ role: m.role, content: m.content })),
+                { role: "user", content: content.trim() },
+            ];
+            const res = await fetch(`${serviceUrl}/v1/chat`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    messages: conversationHistory,
+                    walletAddress: options.walletAddress,
+                    chainId: options.chainId ?? 14000301,
+                    stream: true,
+                }),
+                signal: abortRef.current.signal,
+            });
+            if (!res.ok || !res.body) {
+                throw new Error(`HTTP ${res.status}`);
+            }
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let accumulated = "";
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                const chunk = decoder.decode(value, { stream: true });
+                const lines = chunk.split("\n");
+                for (const line of lines) {
+                    if (!line.startsWith("data: "))
+                        continue;
+                    const payload = line.slice(6).trim();
+                    if (payload === "[DONE]")
+                        break;
+                    try {
+                        const data = JSON.parse(payload);
+                        if (data.error)
+                            throw new Error(data.error);
+                        const delta = data.delta ?? data.content ?? "";
+                        if (delta) {
+                            accumulated += delta;
+                            setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, content: accumulated } : m)));
+                        }
+                    }
+                    catch {
+                        // Non-JSON SSE line — skip
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === "AbortError")
+                return;
+            const msg = err instanceof Error ? err.message : "Unknown error";
+            setError(msg);
+            setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, content: `Error: ${msg}` } : m)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [messages, serviceUrl, options.walletAddress, options.chainId]);
+    const clearMessages = useCallback(() => {
+        abortRef.current?.abort();
+        setMessages([]);
+        setError(null);
+    }, []);
+    return { messages, isLoading, error, sendMessage, clearMessages };
+}

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@ghostchain1/ghostcopilot-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "GhostCopilot React — Floating AI chat widget for GhostCloud apps",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/node": "^22.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ghostmode25/GhostOS.git",
+    "directory": "packages/ghostcopilot-react"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/ghostmode25/GhostOS/tree/main/packages/ghostcopilot-react#ghostchain1-ghostcopilot-react",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/"
+  }
 }