@xyd-js/ask-ai-widget 0.0.0-build-ae5d7ac-20251012020134 → 0.0.0-build-52f9bb2-20251012023142

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@xyd-js/ask-ai-widget",
-  "version": "0.0.0-build-ae5d7ac-20251012020134",
+  "version": "0.0.0-build-52f9bb2-20251012023142",
   "type": "module",
   "main": "dist/server.js",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "widget.tsx",
+    "server.ts"
   ],
+  "bin": {
+    "xyd-ask-ai-widget": "./bin/xyd-ask-ai-widget.mjs"
+  },
   "dependencies": {
     "@prose-sdk/react": "^0.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@xyd-js/ask-ai": "0.0.0-build-ae5d7ac-20251012020134"
+    "@xyd-js/ask-ai": "0.0.0-build-52f9bb2-20251012023142"
   },
   "scripts": {
-    "build": "NODE_ENV=production bun build server.ts --outdir dist --target node",
+    "build": "NODE_ENV=production bun build server.ts --outdir dist --target bun",
     "start": "bun dist/server.js",
     "dev": "bun --watch server.ts"
   }

package/server.ts

@@ -0,0 +1,144 @@
+import { readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
+
+import { handler as askAiHandler } from "@xyd-js/ask-ai/node";
+
+if (!process.env.ASK_AI_URL) {
+  throw new Error("ASK_AI_URL is not set");
+}
+
+// Start the server
+async function startServer() {
+  // Ensure widget is built before starting server
+  await ensureWidgetBuilt();
+
+  // Find an available port
+  const port = await findAvailablePort(parseInt(process.env.PORT || "3500"));
+  console.log(`🔍 Trying to start server on port ${port}...`);
+
+  const server = Bun.serve({
+    port,
+    async fetch(request: Request) {
+      const url = new URL(request.url);
+
+      // Serve the widget bundle at /widget.js
+      if (url.pathname === "/widget.js") {
+        try {
+          const widgetCode = widgetFile();
+
+          return new Response(widgetCode, {
+            headers: {
+              "Content-Type": "application/javascript",
+              "Cache-Control": "public, max-age=3600", // Cache for 1 hour
+            },
+          });
+        } catch (error) {
+          return new Response(
+            "Widget not found. Please run 'bun run build' first.",
+            {
+              status: 404,
+            }
+          );
+        }
+      }
+
+      // Handle ask AI requests at /ask
+      if (url.pathname === "/ask") {
+        return askAiHandler(request);
+      }
+
+      // Default response
+      return new Response(
+        "Xyd Ask AI Widget Server\n\nEndpoints:\n- GET /widget.js - Widget bundle\n- POST /ask - Ask AI endpoint",
+        {
+          headers: { "Content-Type": "text/plain" },
+        }
+      );
+    },
+  });
+
+  console.log(`🚀 Widget server running at http://localhost:${server.port}`);
+  console.log(`📦 Widget bundle: http://localhost:${server.port}/widget.js`);
+  console.log(`🤖 Ask AI endpoint: http://localhost:${server.port}/ask`);
+}
+
+function widgetFile() {
+  const widgetPath = join(process.cwd(), "dist", "widget.js");
+  try {
+    const widgetCode = readFileSync(widgetPath, "utf-8");
+    return widgetCode;
+  } catch (error) {
+    return "";
+  }
+}
+// Build widget using Bun's build API
+async function buildWidget() {
+  console.log("🔨 Building widget using Bun.build()...");
+
+  const envs = {
+    "process.env.NODE_ENV": '"production"',
+    "process.env.ASK_AI_URL": `"${process.env.ASK_AI_URL}"`,
+  };
+
+  try {
+    const result = await Bun.build({
+      entrypoints: ["./widget.tsx"],
+      outdir: "./dist",
+      target: "browser",
+      format: "iife",
+      minify: true,
+      sourcemap: "none",
+      define: {
+        ...envs,
+      },
+    });
+
+    if (result.success) {
+      console.log("✅ Widget built successfully");
+    } else {
+      console.error("❌ Widget build failed:", result.logs);
+      throw new Error("Build failed");
+    }
+  } catch (error) {
+    console.error("❌ Build error:", error);
+    throw error;
+  }
+}
+
+// Ensure widget is built
+async function ensureWidgetBuilt() {
+  const widgetPath = widgetFile();
+
+  if (!existsSync(widgetPath)) {
+    await buildWidget();
+  } else {
+    console.log("✅ Widget already built");
+  }
+}
+
+// Find an available port
+async function findAvailablePort(
+  startPort: number = 3500,
+  maxAttempts: number = 10
+): Promise<number> {
+  for (let i = 0; i < maxAttempts; i++) {
+    const port = startPort + i;
+    try {
+      const testServer = Bun.serve({
+        port,
+        fetch: () => new Response("test"),
+      });
+      testServer.stop();
+      return port;
+    } catch (error) {
+      // Port is in use, try next one
+      continue;
+    }
+  }
+  throw new Error(
+    `No available ports found between ${startPort} and ${startPort + maxAttempts - 1}`
+  );
+}
+
+// Start the server
+startServer().catch(console.error);

package/src/Widget.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect, useRef } from "react";
+
+import { ProseMd } from "@prose-sdk/react";
+
+import { AskAI, useAskAI } from "@xyd-js/ask-ai/react";
+
+interface WidgetConfig {
+  askAiServer?: string;
+}
+
+interface AskWidgetProps {
+  config?: WidgetConfig;
+}
+
+export function AskWidget({ config = {} }: AskWidgetProps) {
+  if (process.env.NODE_ENV === "development") {
+    if (!config?.askAiServer) {
+      config.askAiServer = "http://localhost:3500";
+    }
+  }
+  const { messages, submit, disabled, loading } = useAskAI(
+    config?.askAiServer
+  );
+  const [dots, setDots] = useState(1);
+  const ref = useRef<any>(null);
+
+  const lastMessage = messages?.[messages.length - 1];
+  const isWaitingForAssistant =
+    (messages.length > 0 && lastMessage?.type === "user") ||
+    (lastMessage?.type === "assistant" && lastMessage?.content === "");
+
+  useEffect(() => {
+    ref.current.scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    if (!loading) return;
+
+    const interval = setInterval(() => {
+      setDots((prev) => (prev >= 3 ? 1 : prev + 1));
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, [loading]);
+
+  const getPlaceholder = () => {
+    if (loading) {
+      return `Loading${".".repeat(dots)}`;
+    }
+    return "Ask a question";
+  };
+
+  return (
+    <AskAI
+      onSubmit={submit as any}
+      disabled={disabled}
+      placeholder={getPlaceholder()}
+      ref={ref}
+    >
+      <div slot="title">
+        <span aria-hidden="true">✨</span>
+        {config?.projectName || "Assistant"}
+      </div>
+
+      {messages.map((message) => (
+        <AskAI.Message
+          key={message.id}
+          type={message.type}
+          content={message.type === "user" ? message.content : undefined}
+        >
+          {message.type === "assistant" ? (
+            <_Message message={message.content} />
+          ) : null}
+        </AskAI.Message>
+      ))}
+
+      {loading && isWaitingForAssistant ? (
+        <AskAI.Message
+          type="assistant"
+          content={`Loading${".".repeat(dots)}`}
+        />
+      ) : null}
+    </AskAI>
+  );
+}
+
+function _Message({ message }: { message: string }) {
+  return <ProseMd content={message} />;
+}

package/widget.tsx

@@ -0,0 +1,23 @@
+import { createRoot } from "react-dom/client";
+
+import { AskWidget } from "./src/Widget";
+
+(async () => {
+  // Find the script tag that loaded this widget
+  const currentScript = document.currentScript as HTMLScriptElement;
+
+  // Extract data attributes
+  const config = {
+    askAiServer:
+      currentScript?.dataset["data-server-url"] || process.env.ASK_AI_URL,
+  };
+
+  // Create a container div and append it to body
+  const container = document.createElement("div");
+  container.id = "xyd-ask-ai-widget";
+  document.body.appendChild(container);
+
+  // Render to the container
+  const root = createRoot(container);
+  root.render(<AskWidget config={config} />);
+})();