@kaifusion/widget 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaifusion/widget",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -19,8 +19,13 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:standalone": "vite build --config vite.config.standalone.ts",
     "preview": "vite preview"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "dependencies": {
     "lucide-react": "^0.524.0",
     "motion": "^12.23.12",
@@ -30,14 +35,18 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
+    "rollup": "^4.54.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^25.0.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",

package/src/KaiChatWidget.tsx

@@ -34,7 +34,7 @@ interface Message {
 }
 
 export interface KaiChatWidgetProps {
-  authToken: string;
+  authToken?: string;
   workflowId: string;
   title?: string;
   targetUrl: string;
@@ -64,6 +64,40 @@ export default function KaiChatWidget({
   ]);
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [userProvidedToken, setUserProvidedToken] = useState<string | null>(
+    null
+  );
+  const [isTokenValidating, setIsTokenValidating] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
+  const effectiveToken = authToken || userProvidedToken;
+
+  const handleTokenSubmit = async (token: string) => {
+    if (!token.trim() || isTokenValidating) return;
+
+    setIsTokenValidating(true);
+    setTokenError(null);
+
+    try {
+      const response = await fetch(`${targetUrl}/api/v1/auth/me`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        setUserProvidedToken(token);
+      } else {
+        setTokenError("Geçersiz Erişim Anahtarı. Lütfen tekrar deneyiniz.");
+      }
+    } catch (error) {
+      console.error("Token validation error:", error);
+      setTokenError("Bağlantı hatası. Lütfen tekrar deneyiniz.");
+    } finally {
+      setIsTokenValidating(false);
+    }
+  };
+
   const [copiedCode, setCopiedCode] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const sessionIdRef = useRef(uuidv4());
@@ -111,7 +145,7 @@ export default function KaiChatWidget({
     ]);
 
     try {
-      const token = authToken || localStorage.getItem("auth_access_token");
+      const token = effectiveToken;
       const headers: Record<string, string> = {
         "Content-Type": "application/json",
         Accept: "text/event-stream",
@@ -654,39 +688,84 @@ export default function KaiChatWidget({
             </div>
 
             {/* Input Alanı */}
-            <div className="p-4 bg-white border-t border-gray-100">
-              <div className="flex gap-2 items-center bg-gray-50 rounded-full px-4 py-2 border border-gray-200 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
-                <input
-                  type="text"
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && sendMessage()}
-                  placeholder="Mesajınızı yazın..."
-                  className="flex-1 bg-transparent border-none focus:ring-0 outline-none text-sm py-1"
-                  disabled={isLoading}
-                />
-                <button
-                  onClick={sendMessage}
-                  disabled={isLoading || !input.trim()}
-                  className={`p-2 rounded-full transition-all ${
-                    input.trim() && !isLoading
-                      ? "text-blue-600 hover:bg-blue-50"
-                      : "text-gray-400"
-                  }`}
-                >
-                  {isLoading ? (
-                    <Loader2 className="w-5 h-5 animate-spin" />
-                  ) : (
-                    <Send className="w-5 h-5" />
-                  )}
-                </button>
+            {effectiveToken ? (
+              <div className="p-4 bg-white border-t border-gray-100">
+                <div className="flex gap-2 items-center bg-gray-50 rounded-full px-4 py-2 border border-gray-200 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
+                  <input
+                    type="text"
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && sendMessage()}
+                    placeholder="Mesajınızı yazın..."
+                    className="flex-1 bg-transparent border-none focus:ring-0 outline-none text-sm py-1 text-black"
+                    disabled={isLoading}
+                  />
+                  <button
+                    onClick={sendMessage}
+                    disabled={isLoading || !input.trim()}
+                    className={`p-2 rounded-full transition-all ${
+                      input.trim() && !isLoading
+                        ? "text-blue-600 hover:bg-blue-50"
+                        : "text-gray-400"
+                    }`}
+                  >
+                    {isLoading ? (
+                      <Loader2 className="w-5 h-5 animate-spin" />
+                    ) : (
+                      <Send className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
+                <div className="text-center mt-2">
+                  <span className="text-[10px] text-gray-400">
+                    Powered by Agenticgro
+                  </span>
+                </div>
               </div>
-              <div className="text-center mt-2">
-                <span className="text-[10px] text-gray-400">
-                  Powered by Agenticgro
-                </span>
+            ) : (
+              <div className="p-4 bg-white border-t border-gray-100">
+                <div className="flex flex-col gap-3">
+                  <p className="text-sm text-gray-600 text-center">
+                    Devam etmek için lütfen Erişim Anahtarı giriniz:
+                  </p>
+                  <div className="flex gap-2">
+                    <input
+                      type="password"
+                      placeholder="Access Token"
+                      className={`flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm text-gray-800 ${
+                        tokenError ? "border-red-500" : "border-gray-300"
+                      }`}
+                      disabled={isTokenValidating}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          handleTokenSubmit(e.currentTarget.value);
+                        }
+                      }}
+                    />
+                    <button
+                      className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 rounded-lg transition-colors text-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-w-[60px]"
+                      disabled={isTokenValidating}
+                      onClick={(e) => {
+                        const inputEl = e.currentTarget
+                          .previousElementSibling as HTMLInputElement;
+                        handleTokenSubmit(inputEl.value);
+                      }}
+                    >
+                      {isTokenValidating ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        "Giriş"
+                      )}
+                    </button>
+                  </div>
+                  {tokenError && (
+                    <p className="text-xs text-red-500 text-center">
+                      {tokenError}
+                    </p>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </motion.div>
         )}
       </AnimatePresence>
@@ -708,4 +787,4 @@ export default function KaiChatWidget({
       </motion.button>
     </div>
   );
-}
+}

package/src/embed.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import KaiChatWidget, { KaiChatWidgetProps } from "./KaiChatWidget";
+// @ts-ignore
+import styles from "./index.css?inline";
+
+declare global {
+  interface Window {
+    KaiChat: {
+      init: (config: KaiChatWidgetProps) => void;
+    };
+  }
+}
+
+const KAI_CHAT_HOST_ID = "kai-chat-widget-host";
+
+function init(config: KaiChatWidgetProps) {
+  if (document.getElementById(KAI_CHAT_HOST_ID)) {
+    return;
+  }
+
+  const host = document.createElement("div");
+  host.id = KAI_CHAT_HOST_ID;
+  
+  host.style.position = "fixed";
+  host.style.zIndex = "2147483647";
+  host.style.bottom = "0";
+  host.style.right = "0"; 
+  host.style.width = "0";
+  host.style.height = "0";
+  host.style.overflow = "visible";
+
+  document.body.appendChild(host);
+
+  const shadow = host.attachShadow({ mode: "open" });
+
+  const styleTag = document.createElement("style");
+  styleTag.textContent = styles;
+  shadow.appendChild(styleTag);
+
+  const mountPoint = document.createElement("div");
+  mountPoint.id = "kai-chat-root";
+  shadow.appendChild(mountPoint);
+
+  const root = ReactDOM.createRoot(mountPoint);
+  root.render(
+    <React.StrictMode>
+      <KaiChatWidget {...config} />
+    </React.StrictMode>
+  );
+}
+
+// Global scope'a bağla
+window.KaiChat = { init };
+
+// OTOMATİK BAŞLATMA MANTIĞI
+// Mevcut çalışan scripti bul (genellikle son eklenen scripttir veya src ile aranabilir)
+// document.currentScript modern tarayıcılarda çalışır.
+const currentScript = document.currentScript as HTMLScriptElement;
+
+if (currentScript) {
+  const title = currentScript.getAttribute("data-title");
+  const authToken = currentScript.getAttribute("data-auth-token");
+  const workflowId = currentScript.getAttribute("data-workflow-id");
+  const targetUrl = currentScript.getAttribute("data-target-url");
+  const position = currentScript.getAttribute("data-position") as "left" | "right" | null;
+  const color = currentScript.getAttribute("data-color");
+
+  // Eğer gerekli parametreler varsa otomatik başlat
+  if (workflowId && targetUrl) {
+    // DOM hazır olana kadar bekle
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        init({
+          title: title || "ChatBot",
+          authToken: authToken || "",
+          workflowId,
+          targetUrl,
+          position: position || "right",
+          color: color || "#526cfe",
+        });
+      });
+    } else {
+      init({
+        title: title || "ChatBot",
+        authToken: authToken || "",
+        workflowId,
+        targetUrl,
+        position: position || "right",
+        color: color || "#526cfe",
+      });
+    }
+  }
+}

package/src/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+

package/dist/KaiChatWidget.d.ts

@@ -1,10 +0,0 @@
-export interface KaiChatWidgetProps {
-    authToken: string;
-    workflowId: string;
-    title?: string;
-    targetUrl: string;
-    position?: "left" | "right";
-    color?: string;
-    icon?: React.ReactNode;
-}
-export default function KaiChatWidget({ authToken, workflowId, title, targetUrl, position, color, icon, }: KaiChatWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as KaiChatWidget } from './KaiChatWidget';
-export type { KaiChatWidgetProps } from './KaiChatWidget';