@kaifusion/widget 1.0.6 → 1.0.8

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@kaifusion/widget",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
-  "main": "./dist/index.es.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
+  "style": "./dist/style.css",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -11,10 +12,12 @@
   ],
   "exports": {
     ".": {
+      "style": "./dist/style.css",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.es.js"
-    }
+      "require": "./dist/index.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "vite",
@@ -50,6 +53,7 @@
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
-    "vite-plugin-dts": "^3.7.0"
+    "vite-plugin-dts": "^3.7.0",
+    "vite-plugin-lib-inject-css": "^2.2.2"
   }
 }

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;
@@ -69,9 +70,9 @@ export default function KaiChatWidget({
   );
   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;
 
@@ -79,7 +80,7 @@ export default function KaiChatWidget({
     setTokenError(null);
 
     try {
-      const response = await fetch(`${targetUrl}/api/v1/auth/me`, {
+      const response = await fetch(`${targetUrl}/${config.API_START}/${config.API_VERSION_ONLY}/auth/me`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -156,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({
@@ -251,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 */}
@@ -282,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
@@ -323,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">
@@ -483,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">
                                   •
@@ -496,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">
@@ -588,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>
@@ -599,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>
@@ -690,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}
@@ -703,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" />
@@ -732,9 +733,8 @@ export default function KaiChatWidget({
                     <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"
-                      }`}
+                      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") {

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();

package/src/index.ts

@@ -1,2 +1,3 @@
+import "./index.css";
 export { default as KaiChatWidget } from "./KaiChatWidget";
 export type { KaiChatWidgetProps } from "./KaiChatWidget";