@kaifusion/widget 1.0.5 → 1.0.7

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kaifusion/widget",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
-  "main": "./dist/index.es.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -13,7 +13,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.es.js"
+      "require": "./dist/index.cjs"
     }
   },
   "scripts": {

package/src/KaiChatWidget.tsx

@@ -24,6 +24,7 @@ import {
 } from "lucide-react";
 import { motion, AnimatePresence } from "motion/react";
 import { v4 as uuidv4 } from "uuid";
+import { config } from "./config";
 
 interface Message {
   id: string;
@@ -67,12 +68,34 @@ export default function KaiChatWidget({
   const [userProvidedToken, setUserProvidedToken] = useState<string | null>(
     null
   );
+  const [isTokenValidating, setIsTokenValidating] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+  const [isInputFocused, setIsInputFocused] = useState(false);
 
   const effectiveToken = authToken || userProvidedToken;
+  const handleTokenSubmit = async (token: string) => {
+    if (!token.trim() || isTokenValidating) return;
 
-  const handleTokenSubmit = (token: string) => {
-    if (token.trim()) {
-      setUserProvidedToken(token);
+    setIsTokenValidating(true);
+    setTokenError(null);
+
+    try {
+      const response = await fetch(`${targetUrl}/${config.API_START}/${config.API_VERSION_ONLY}/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);
     }
   };
 
@@ -134,7 +157,7 @@ export default function KaiChatWidget({
         headers["X-API-Key"] = token;
       }
 
-      const response = await fetch(`${targetUrl}/api/v1/workflows/execute`, {
+      const response = await fetch(`${targetUrl}/${config.API_START}/${config.API_VERSION_ONLY}/workflows/execute`, {
         method: "POST",
         headers,
         body: JSON.stringify({
@@ -229,9 +252,8 @@ export default function KaiChatWidget({
 
   return (
     <div
-      className={`fixed bottom-5 z-50 flex flex-col items-end gap-4 font-sans ${
-        position === "left" ? "left-5" : "right-5"
-      }`}
+      className={`fixed bottom-5 z-50 flex flex-col items-end gap-4 font-sans ${position === "left" ? "left-5" : "right-5"
+        }`}
       style={{ fontFamily: "system-ui, -apple-system, sans-serif" }}
     >
       {/* Overlay - Tam Ekran Modu İçin */}
@@ -260,11 +282,10 @@ export default function KaiChatWidget({
               height: isMaximized ? "85vh" : "600px",
             }}
             exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            className={`rounded-2xl shadow-2xl flex flex-col overflow-hidden z-50 transition-all duration-300 ${
-              isMaximized
-                ? "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 m-0"
-                : "relative"
-            }`}
+            className={`rounded-2xl shadow-2xl flex flex-col overflow-hidden z-50 transition-all duration-300 ${isMaximized
+              ? "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 m-0"
+              : "relative"
+              }`}
           >
             {/* Header */}
             <div
@@ -301,20 +322,17 @@ export default function KaiChatWidget({
               {messages.map((msg) => (
                 <div
                   key={msg.id}
-                  className={`flex ${
-                    msg.isBot ? "justify-start" : "justify-end"
-                  } ${
-                    msg.isBot && !msg.content && !msg.isError ? "hidden" : ""
-                  }`}
+                  className={`flex ${msg.isBot ? "justify-start" : "justify-end"
+                    } ${msg.isBot && !msg.content && !msg.isError ? "hidden" : ""
+                    }`}
                 >
                   <div
-                    className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
-                      msg.isBot
-                        ? msg.isError
-                          ? "bg-red-50 text-red-600 border border-red-100"
-                          : "bg-white text-gray-800 border border-gray-100"
-                        : "text-white"
-                    }`}
+                    className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${msg.isBot
+                      ? msg.isError
+                        ? "bg-red-50 text-red-600 border border-red-100"
+                        : "bg-white text-gray-800 border border-gray-100"
+                      : "text-white"
+                      }`}
                     style={!msg.isBot ? { backgroundColor: color } : {}}
                   >
                     <div className="max-w-none break-words">
@@ -461,9 +479,8 @@ export default function KaiChatWidget({
 
                             return isOrderedList ? (
                               <li
-                                className={`flex items-start gap-2 pl-1 leading-relaxed ${
-                                  !msg.isBot ? "text-white" : "text-gray-700"
-                                }`}
+                                className={`flex items-start gap-2 pl-1 leading-relaxed ${!msg.isBot ? "text-white" : "text-gray-700"
+                                  }`}
                               >
                                 <span className="flex-shrink-0 w-5 h-5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full flex items-center justify-center text-[10px] font-bold mt-0.5 shadow-sm counter-increment">
                                   •
@@ -474,9 +491,8 @@ export default function KaiChatWidget({
                               </li>
                             ) : (
                               <li
-                                className={`flex items-start gap-2 pl-1 leading-relaxed ${
-                                  !msg.isBot ? "text-white" : "text-gray-700"
-                                }`}
+                                className={`flex items-start gap-2 pl-1 leading-relaxed ${!msg.isBot ? "text-white" : "text-gray-700"
+                                  }`}
                               >
                                 <span className="flex-shrink-0 w-1.5 h-1.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mt-2 shadow-sm"></span>
                                 <div className="flex-1 text-left">
@@ -566,9 +582,8 @@ export default function KaiChatWidget({
                           // Paragraflar - daha iyi spacing
                           p: ({ children }: any) => (
                             <p
-                              className={`m-0! last:mb-0 leading-relaxed break-words overflow-wrap-anywhere text-sm ${
-                                !msg.isBot ? "text-white" : "text-gray-700"
-                              }`}
+                              className={`m-0! last:mb-0 leading-relaxed break-words overflow-wrap-anywhere text-sm ${!msg.isBot ? "text-white" : "text-gray-700"
+                                }`}
                             >
                               {children}
                             </p>
@@ -577,18 +592,16 @@ export default function KaiChatWidget({
                           // Vurgu metinleri
                           strong: ({ children }: any) => (
                             <strong
-                              className={`font-bold inline ${
-                                !msg.isBot ? "text-white" : "text-gray-900"
-                              }`}
+                              className={`font-bold inline ${!msg.isBot ? "text-white" : "text-gray-900"
+                                }`}
                             >
                               {children}
                             </strong>
                           ),
                           em: ({ children }: any) => (
                             <em
-                              className={`italic ${
-                                !msg.isBot ? "text-white/90" : "text-gray-600"
-                              }`}
+                              className={`italic ${!msg.isBot ? "text-white/90" : "text-gray-600"
+                                }`}
                             >
                               {children}
                             </em>
@@ -668,12 +681,20 @@ export default function KaiChatWidget({
             {/* Input Alanı */}
             {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">
+                <div
+                  className="flex gap-2 items-center bg-gray-50 rounded-full px-4 py-2 border border-gray-200 transition-all"
+                  style={{
+                    borderColor: isInputFocused ? color : undefined,
+                    boxShadow: isInputFocused ? `0 0 0 1px ${color}` : undefined,
+                  }}
+                >
                   <input
                     type="text"
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     onKeyDown={(e) => e.key === "Enter" && sendMessage()}
+                    onFocus={() => setIsInputFocused(true)}
+                    onBlur={() => setIsInputFocused(false)}
                     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}
@@ -681,11 +702,13 @@ export default function KaiChatWidget({
                   <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"
-                    }`}
+                    className={`p-2 rounded-full transition-all ${input.trim() && !isLoading
+                      ? "hover:bg-gray-100"
+                      : "text-gray-400"
+                      }`}
+                    style={{
+                      color: input.trim() && !isLoading ? color : undefined,
+                    }}
                   >
                     {isLoading ? (
                       <Loader2 className="w-5 h-5 animate-spin" />
@@ -710,7 +733,9 @@ export default function KaiChatWidget({
                     <input
                       type="password"
                       placeholder="Access Token"
-                      className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm text-gray-800"
+                      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);
@@ -718,16 +743,26 @@ export default function KaiChatWidget({
                       }}
                     />
                     <button
-                      className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 rounded-lg transition-colors text-sm"
+                      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);
                       }}
                     >
-                      Giriş
+                      {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>
             )}

package/src/config.ts

@@ -0,0 +1,27 @@
+// Widget-specific configuration
+// This is a standalone config for the widget package to avoid
+// dependencies on the client package during Docker builds
+
+export interface WidgetConfig {
+    API_START: string;
+    API_VERSION_ONLY: string;
+}
+
+// Default values that can be overridden via props or window globals
+const getWidgetConfig = (): WidgetConfig => {
+    // Check for window globals (for runtime configuration)
+    if (typeof window !== 'undefined') {
+        return {
+            API_START: (window as any).VITE_API_START || 'api',
+            API_VERSION_ONLY: (window as any).VITE_API_VERSION_ONLY || 'v1',
+        };
+    }
+
+    // Fallback defaults
+    return {
+        API_START: 'api',
+        API_VERSION_ONLY: 'v1',
+    };
+};
+
+export const config = getWidgetConfig();