aizek-chatbot 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +275 -189
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +248 -179
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
- import * as React from 'react';
2
- import { useState, useEffect, useRef } from 'react';
3
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
- import OpenAI from 'openai';
5
- import ReactMarkdown from 'react-markdown';
6
- import remarkGfm from 'remark-gfm';
1
+ "use client";
2
+ import * as React from "react";
3
+ import { useState, useEffect, useRef } from "react";
4
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
5
+ import OpenAI from "openai";
6
+ import ReactMarkdown from "react-markdown";
7
+ import remarkGfm from "remark-gfm";
7
8
 
8
9
  // src/utils/cx.ts
9
10
  function cx(...args) {
@@ -18,18 +19,18 @@ var base = {
18
19
  lineHeight: 1,
19
20
  transition: "background-color .2s ease, color .2s ease, border-color .2s ease",
20
21
  outline: "none",
21
- cursor: "pointer"
22
+ cursor: "pointer",
22
23
  };
23
24
  var sizes = {
24
25
  sm: { height: 36, padding: "0 12px", fontSize: 14 },
25
26
  md: { height: 40, padding: "0 16px", fontSize: 16 },
26
- lg: { height: 44, padding: "0 20px", fontSize: 18 }
27
+ lg: { height: 44, padding: "0 20px", fontSize: 18 },
27
28
  };
28
29
  var palette = {
29
30
  brand: {
30
31
  primary: "#2563eb",
31
- primaryHover: "#1d4ed8"
32
- }
32
+ primaryHover: "#1d4ed8",
33
+ },
33
34
  };
34
35
  function styleFor(variant) {
35
36
  switch (variant) {
@@ -37,49 +38,50 @@ function styleFor(variant) {
37
38
  return {
38
39
  background: "transparent",
39
40
  color: palette.brand.primary,
40
- border: `1px solid ${palette.brand.primary}`
41
+ border: `1px solid ${palette.brand.primary}`,
41
42
  };
42
43
  case "ghost":
43
44
  return {
44
45
  background: "transparent",
45
46
  color: palette.brand.primary,
46
- border: "1px solid transparent"
47
+ border: "1px solid transparent",
47
48
  };
48
49
  default:
49
50
  return {
50
51
  background: palette.brand.primary,
51
52
  color: "#fff",
52
- border: "1px solid transparent"
53
+ border: "1px solid transparent",
53
54
  };
54
55
  }
55
56
  }
56
- var Button = React.forwardRef(
57
- ({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
58
- const [hover, setHover] = React.useState(false);
59
- const hoverStyle = variant === "primary" ? { background: hover ? palette.brand.primaryHover : palette.brand.primary } : variant === "outline" ? { borderColor: hover ? palette.brand.primaryHover : palette.brand.primary } : { background: hover ? "rgba(37, 99, 235, 0.08)" : "transparent" };
60
- return /* @__PURE__ */ jsx(
61
- "button",
62
- {
63
- ref,
64
- className: cx("rui-btn", className),
65
- style: { ...base, ...sizes[size], ...styleFor(variant), ...hover ? hoverStyle : {}, ...style },
66
- onMouseEnter: (e) => {
67
- setHover(true);
68
- onMouseEnter?.(e);
69
- },
70
- onMouseLeave: (e) => {
71
- setHover(false);
72
- onMouseLeave?.(e);
73
- },
74
- ...props
75
- }
76
- );
77
- }
78
- );
57
+ var Button = React.forwardRef(({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
58
+ const [hover, setHover] = React.useState(false);
59
+ const hoverStyle =
60
+ variant === "primary"
61
+ ? { background: hover ? palette.brand.primaryHover : palette.brand.primary }
62
+ : variant === "outline"
63
+ ? { borderColor: hover ? palette.brand.primaryHover : palette.brand.primary }
64
+ : { background: hover ? "rgba(37, 99, 235, 0.08)" : "transparent" };
65
+ return /* @__PURE__ */ jsx("button", {
66
+ ref,
67
+ className: cx("rui-btn", className),
68
+ style: { ...base, ...sizes[size], ...styleFor(variant), ...(hover ? hoverStyle : {}), ...style },
69
+ onMouseEnter: (e) => {
70
+ setHover(true);
71
+ onMouseEnter?.(e);
72
+ },
73
+ onMouseLeave: (e) => {
74
+ setHover(false);
75
+ onMouseLeave?.(e);
76
+ },
77
+ ...props,
78
+ });
79
+ });
79
80
  Button.displayName = "Button";
80
81
  var useChatbot = (options = {}) => {
81
82
  const { mcpUrl, apiKey } = options;
82
83
  const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true });
84
+ const [responseId, setResponseId] = useState(null);
83
85
  const [messages, setMessages] = useState([]);
84
86
  const [isLoading, setIsLoading] = useState(false);
85
87
  const generateId = () => {
@@ -90,7 +92,7 @@ var useChatbot = (options = {}) => {
90
92
  id: generateId(),
91
93
  content,
92
94
  role,
93
- timestamp: /* @__PURE__ */ new Date()
95
+ timestamp: /* @__PURE__ */ new Date(),
94
96
  };
95
97
  setMessages((prev) => [...prev, newMessage]);
96
98
  return newMessage;
@@ -99,23 +101,41 @@ var useChatbot = (options = {}) => {
99
101
  if (!message.trim() || isLoading) return;
100
102
  addMessage(message, "user");
101
103
  setIsLoading(true);
102
- console.log(options.userToken);
103
104
  try {
104
- const resp = await client.responses.create({
105
- model: "gpt-5",
106
- tools: [
107
- {
108
- type: "mcp",
109
- server_label: "aizek-mcp",
110
- server_url: mcpUrl,
111
- require_approval: "never",
112
- headers: {
113
- Authorization: options.userToken ? `Bearer ${options.userToken}` : ""
114
- }
115
- }
116
- ],
117
- input: message
118
- });
105
+ let resp;
106
+ if (options.userToken) {
107
+ resp = await client.responses.create({
108
+ model: "gpt-5",
109
+ tools: [
110
+ {
111
+ type: "mcp",
112
+ server_label: "aizek-mcp",
113
+ server_url: mcpUrl,
114
+ require_approval: "never",
115
+ headers: {
116
+ Authorization: `Bearer ${options.userToken}`,
117
+ },
118
+ },
119
+ ],
120
+ input: message,
121
+ previous_response_id: responseId || void 0,
122
+ });
123
+ } else {
124
+ resp = await client.responses.create({
125
+ model: "gpt-5",
126
+ tools: [
127
+ {
128
+ type: "mcp",
129
+ server_label: "aizek-mcp",
130
+ server_url: mcpUrl,
131
+ require_approval: "never",
132
+ },
133
+ ],
134
+ input: message,
135
+ previous_response_id: responseId || void 0,
136
+ });
137
+ }
138
+ setResponseId(resp.id);
119
139
  let responseText = "";
120
140
  if (resp && Array.isArray(resp)) {
121
141
  const messageItem = resp.find((item) => item.type === "message");
@@ -147,7 +167,7 @@ var useChatbot = (options = {}) => {
147
167
  messages,
148
168
  isLoading,
149
169
  sendMessage,
150
- addMessage
170
+ addMessage,
151
171
  };
152
172
  };
153
173
 
@@ -158,8 +178,8 @@ var fetchChatWidgetSettings = async (clientId) => {
158
178
  const response = await fetch(`${API_BASE_URL}/ChatWidgetSettings/GetByClientId?client_id=${clientId}`, {
159
179
  method: "GET",
160
180
  headers: {
161
- "Content-Type": "application/json"
162
- }
181
+ "Content-Type": "application/json",
182
+ },
163
183
  });
164
184
  if (!response.ok) {
165
185
  throw new Error(`HTTP error! status: ${response.status}`);
@@ -176,9 +196,9 @@ var mapApiSettingsToConfig = (apiSettings) => {
176
196
  return null;
177
197
  }
178
198
  const buttonSizeMap = {
179
- "small": "sm",
180
- "medium": "md",
181
- "large": "lg"
199
+ small: "sm",
200
+ medium: "md",
201
+ large: "lg",
182
202
  };
183
203
  return {
184
204
  welcomeMessage: apiSettings.welcome_message,
@@ -192,7 +212,7 @@ var mapApiSettingsToConfig = (apiSettings) => {
192
212
  initialOpen: apiSettings.initial_open,
193
213
  headerBackground: apiSettings.header_background,
194
214
  companyLogo: apiSettings.company_logo || void 0,
195
- companyName: apiSettings.company_name
215
+ companyName: apiSettings.company_name,
196
216
  };
197
217
  };
198
218
 
@@ -206,27 +226,29 @@ var getMessageBubbleStyles = (isUser) => ({
206
226
  lineHeight: 1.4,
207
227
  fontSize: "14px",
208
228
  position: "relative",
209
- ...isUser ? {
210
- background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
211
- color: "#ffffff",
212
- marginLeft: "auto",
213
- marginRight: "0"
214
- } : {
215
- background: "#f8fafc",
216
- color: "#334155",
217
- border: "1px solid #e2e8f0",
218
- marginLeft: "0",
219
- marginRight: "auto"
220
- }
229
+ ...(isUser
230
+ ? {
231
+ background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
232
+ color: "#ffffff",
233
+ marginLeft: "auto",
234
+ marginRight: "0",
235
+ }
236
+ : {
237
+ background: "#f8fafc",
238
+ color: "#334155",
239
+ border: "1px solid #e2e8f0",
240
+ marginLeft: "0",
241
+ marginRight: "auto",
242
+ }),
221
243
  });
222
244
  var getTimeStyles = (isUser) => ({
223
245
  fontSize: "11px",
224
246
  opacity: 0.7,
225
247
  marginTop: "4px",
226
- textAlign: isUser ? "right" : "left"
248
+ textAlign: isUser ? "right" : "left",
227
249
  });
228
250
  var getMarkdownStyles = () => ({
229
- lineHeight: 1.6
251
+ lineHeight: 1.6,
230
252
  });
231
253
  var getMarkdownElementStyles = (isUser) => `
232
254
  .markdown-content p {
@@ -387,7 +409,7 @@ var getMessageContainerStyles = (isUser) => ({
387
409
  display: "flex",
388
410
  flexDirection: "column",
389
411
  alignItems: isUser ? "flex-end" : "flex-start",
390
- width: "100%"
412
+ width: "100%",
391
413
  });
392
414
 
393
415
  // src/styles/inputStyles.ts
@@ -398,7 +420,7 @@ var getInputContainerStyles = () => ({
398
420
  padding: "16px",
399
421
  background: "#ffffff",
400
422
  borderTop: "1px solid #e2e8f0",
401
- borderRadius: "0 0 12px 12px"
423
+ borderRadius: "0 0 12px 12px",
402
424
  });
403
425
  var getTextareaStyles = (isLoading) => ({
404
426
  flex: 1,
@@ -415,10 +437,12 @@ var getTextareaStyles = (isLoading) => ({
415
437
  fontFamily: "inherit",
416
438
  background: "#f8fafc",
417
439
  color: "#334155",
418
- ...isLoading ? {
419
- opacity: 0.6,
420
- cursor: "not-allowed"
421
- } : {}
440
+ ...(isLoading
441
+ ? {
442
+ opacity: 0.6,
443
+ cursor: "not-allowed",
444
+ }
445
+ : {}),
422
446
  });
423
447
  var getSendButtonStyles = (isLoading, hasMessage) => ({
424
448
  width: "44px",
@@ -432,7 +456,7 @@ var getSendButtonStyles = (isLoading, hasMessage) => ({
432
456
  alignItems: "center",
433
457
  justifyContent: "center",
434
458
  transition: "all 0.2s ease",
435
- fontSize: "16px"
459
+ fontSize: "16px",
436
460
  });
437
461
 
438
462
  // src/styles/headerStyles.ts
@@ -442,7 +466,7 @@ var getHeaderStyles = (headerBackground) => ({
442
466
  color: "#ffffff",
443
467
  display: "flex",
444
468
  alignItems: "center",
445
- gap: "12px"
469
+ gap: "12px",
446
470
  });
447
471
  var getLogoContainerStyles = () => ({
448
472
  width: "40px",
@@ -453,34 +477,34 @@ var getLogoContainerStyles = () => ({
453
477
  alignItems: "center",
454
478
  justifyContent: "center",
455
479
  fontSize: "18px",
456
- overflow: "hidden"
480
+ overflow: "hidden",
457
481
  });
458
482
  var getLogoImageStyles = () => ({
459
483
  width: "100%",
460
484
  height: "100%",
461
485
  objectFit: "cover",
462
- borderRadius: "50%"
486
+ borderRadius: "50%",
463
487
  });
464
488
  var getLogoTextStyles = () => ({
465
489
  fontSize: "16px",
466
- fontWeight: "bold"
490
+ fontWeight: "bold",
467
491
  });
468
492
  var getCompanyNameStyles = () => ({
469
493
  margin: 0,
470
494
  fontSize: "16px",
471
- fontWeight: 600
495
+ fontWeight: 600,
472
496
  });
473
497
  var getStatusTextStyles = () => ({
474
498
  margin: 0,
475
499
  fontSize: "12px",
476
- opacity: 0.8
500
+ opacity: 0.8,
477
501
  });
478
502
 
479
503
  // src/styles/containerStyles.ts
480
504
  var getButtonSizes = () => ({
481
505
  sm: { width: "50px", height: "50px", fontSize: "20px" },
482
506
  md: { width: "60px", height: "60px", fontSize: "24px" },
483
- lg: { width: "70px", height: "70px", fontSize: "28px" }
507
+ lg: { width: "70px", height: "70px", fontSize: "28px" },
484
508
  });
485
509
  var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isOpen) => {
486
510
  const buttonSizes = getButtonSizes();
@@ -503,7 +527,7 @@ var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isO
503
527
  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
504
528
  transition: "all 0.3s ease",
505
529
  zIndex: 1e3,
506
- transform: isOpen ? "scale(0.9)" : "scale(1)"
530
+ transform: isOpen ? "scale(0.9)" : "scale(1)",
507
531
  };
508
532
  };
509
533
  var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) => ({
@@ -517,7 +541,7 @@ var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) =>
517
541
  opacity: isOpen ? 1 : 0,
518
542
  visibility: isOpen ? "visible" : "hidden",
519
543
  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
520
- transformOrigin: buttonPosition === "bottom-left" ? "bottom left" : "bottom right"
544
+ transformOrigin: buttonPosition === "bottom-left" ? "bottom left" : "bottom right",
521
545
  });
522
546
  var getOverlayStyles = (isOpen) => ({
523
547
  position: "fixed",
@@ -529,7 +553,7 @@ var getOverlayStyles = (isOpen) => ({
529
553
  zIndex: 998,
530
554
  opacity: isOpen ? 1 : 0,
531
555
  visibility: isOpen ? "visible" : "hidden",
532
- transition: "all 0.3s ease"
556
+ transition: "all 0.3s ease",
533
557
  });
534
558
  var getChatbotContainerStyles = () => ({
535
559
  display: "flex",
@@ -539,7 +563,7 @@ var getChatbotContainerStyles = () => ({
539
563
  borderRadius: "12px",
540
564
  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
541
565
  border: "1px solid #e2e8f0",
542
- overflow: "hidden"
566
+ overflow: "hidden",
543
567
  });
544
568
  var getMessagesContainerStyles = () => ({
545
569
  flex: 1,
@@ -548,7 +572,7 @@ var getMessagesContainerStyles = () => ({
548
572
  display: "flex",
549
573
  flexDirection: "column",
550
574
  gap: "4px",
551
- background: "#f8fafc"
575
+ background: "#f8fafc",
552
576
  });
553
577
  var getEmptyStateStyles = () => ({
554
578
  display: "flex",
@@ -558,7 +582,7 @@ var getEmptyStateStyles = () => ({
558
582
  height: "100%",
559
583
  color: "#64748b",
560
584
  textAlign: "center",
561
- padding: "40px 20px"
585
+ padding: "40px 20px",
562
586
  });
563
587
 
564
588
  // src/styles/loadingStyles.ts
@@ -568,7 +592,7 @@ var getLoadingSpinnerStyles = () => ({
568
592
  border: "2px solid transparent",
569
593
  borderTop: "2px solid currentColor",
570
594
  borderRadius: "50%",
571
- animation: "spin 1s linear infinite"
595
+ animation: "spin 1s linear infinite",
572
596
  });
573
597
  var AizekChatBot = ({ clientId, userToken }) => {
574
598
  const defaultConfig = {
@@ -583,7 +607,7 @@ var AizekChatBot = ({ clientId, userToken }) => {
583
607
  initialOpen: true,
584
608
  headerBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
585
609
  companyLogo: void 0,
586
- companyName: "AI Asistan"
610
+ companyName: "AI Asistan",
587
611
  };
588
612
  const [config, setConfig] = useState(defaultConfig);
589
613
  const [isConfigLoading, setIsConfigLoading] = useState(true);
@@ -628,21 +652,34 @@ var AizekChatBot = ({ clientId, userToken }) => {
628
652
  }, [messages]);
629
653
  const MessageBubble = ({ message }) => {
630
654
  const isUser = message.role === "user";
631
- return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
632
- /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
633
- /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
634
- /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }),
635
- message.isTyping && /* @__PURE__ */ jsx("div", { style: {
636
- display: "inline-flex",
637
- alignItems: "center",
638
- marginLeft: "8px"
639
- }, children: /* @__PURE__ */ jsx(TypingDots, {}) })
640
- ] }),
641
- /* @__PURE__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
642
- hour: "2-digit",
643
- minute: "2-digit"
644
- }) })
645
- ] });
655
+ return /* @__PURE__ */ jsxs("div", {
656
+ style: getMessageContainerStyles(isUser),
657
+ children: [
658
+ /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
659
+ /* @__PURE__ */ jsxs("div", {
660
+ style: getMessageBubbleStyles(isUser),
661
+ children: [
662
+ /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }),
663
+ message.isTyping &&
664
+ /* @__PURE__ */ jsx("div", {
665
+ style: {
666
+ display: "inline-flex",
667
+ alignItems: "center",
668
+ marginLeft: "8px",
669
+ },
670
+ children: /* @__PURE__ */ jsx(TypingDots, {}),
671
+ }),
672
+ ],
673
+ }),
674
+ /* @__PURE__ */ jsx("div", {
675
+ style: getTimeStyles(isUser),
676
+ children: message.timestamp.toLocaleTimeString("tr-TR", {
677
+ hour: "2-digit",
678
+ minute: "2-digit",
679
+ }),
680
+ }),
681
+ ],
682
+ });
646
683
  };
647
684
  const TypingDots = () => {
648
685
  const [dots, setDots] = useState("");
@@ -682,22 +719,20 @@ var AizekChatBot = ({ clientId, userToken }) => {
682
719
  textarea.style.height = "auto";
683
720
  textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
684
721
  };
685
- return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: getInputContainerStyles(), children: [
686
- /* @__PURE__ */ jsx(
687
- "textarea",
688
- {
722
+ return /* @__PURE__ */ jsxs("form", {
723
+ onSubmit: handleSubmit,
724
+ style: getInputContainerStyles(),
725
+ children: [
726
+ /* @__PURE__ */ jsx("textarea", {
689
727
  ref: textareaRef,
690
728
  value: message,
691
729
  onChange: handleInputChange,
692
730
  onKeyDown: handleKeyDown,
693
731
  placeholder,
694
732
  disabled: isLoading,
695
- style: getTextareaStyles(isLoading)
696
- }
697
- ),
698
- /* @__PURE__ */ jsx(
699
- "button",
700
- {
733
+ style: getTextareaStyles(isLoading),
734
+ }),
735
+ /* @__PURE__ */ jsx("button", {
701
736
  type: "submit",
702
737
  disabled: isLoading || !message.trim(),
703
738
  style: getSendButtonStyles(isLoading, !!message.trim()),
@@ -709,10 +744,12 @@ var AizekChatBot = ({ clientId, userToken }) => {
709
744
  onMouseLeave: (e) => {
710
745
  e.currentTarget.style.transform = "scale(1)";
711
746
  },
712
- children: isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
713
- }
714
- )
715
- ] });
747
+ children: isLoading
748
+ ? /* @__PURE__ */ jsx(LoadingSpinner, {})
749
+ : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }),
750
+ }),
751
+ ],
752
+ });
716
753
  };
717
754
  const LoadingSpinner = () => {
718
755
  return /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() });
@@ -720,55 +757,73 @@ var AizekChatBot = ({ clientId, userToken }) => {
720
757
  if (isConfigLoading) {
721
758
  return /* @__PURE__ */ jsx("div", { style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, false), children: /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() }) });
722
759
  }
723
- return /* @__PURE__ */ jsxs(Fragment, { children: [
724
- isOpen && /* @__PURE__ */ jsx(
725
- "div",
726
- {
727
- style: getOverlayStyles(isOpen),
728
- onClick: toggleChat,
729
- className: "floating-chat-overlay"
730
- }
731
- ),
732
- /* @__PURE__ */ jsx("div", { style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen), className: "floating-chat-container", children: /* @__PURE__ */ jsxs("div", { style: getChatbotContainerStyles(), children: [
733
- /* @__PURE__ */ jsxs("div", { style: getHeaderStyles(headerBackground), children: [
734
- /* @__PURE__ */ jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsx(
735
- "img",
736
- {
737
- src: companyLogo,
738
- alt: "Company Logo",
739
- style: getLogoImageStyles()
740
- }
741
- ) : /* @__PURE__ */ jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
742
- /* @__PURE__ */ jsxs("div", { children: [
743
- /* @__PURE__ */ jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
744
- /* @__PURE__ */ jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
745
- ] })
746
- ] }),
747
- /* @__PURE__ */ jsxs("div", { style: getMessagesContainerStyles(), children: [
748
- messages.length === 0 ? /* @__PURE__ */ jsxs("div", { style: getEmptyStateStyles(), children: [
749
- /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
750
- /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
751
- /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px", opacity: 0.8 }, children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
752
- ] }) : messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)),
753
- showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsx(
754
- MessageBubble,
755
- {
756
- message: {
757
- id: "typing",
758
- content: "",
759
- role: "assistant",
760
- timestamp: /* @__PURE__ */ new Date(),
761
- isTyping: true
762
- }
763
- }
764
- ),
765
- /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
766
- ] }),
767
- /* @__PURE__ */ jsx(ChatInput, {})
768
- ] }) }),
769
- /* @__PURE__ */ jsx(
770
- "button",
771
- {
760
+ return /* @__PURE__ */ jsxs(Fragment, {
761
+ children: [
762
+ isOpen &&
763
+ /* @__PURE__ */ jsx("div", {
764
+ style: getOverlayStyles(isOpen),
765
+ onClick: toggleChat,
766
+ className: "floating-chat-overlay",
767
+ }),
768
+ /* @__PURE__ */ jsx("div", {
769
+ style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen),
770
+ className: "floating-chat-container",
771
+ children: /* @__PURE__ */ jsxs("div", {
772
+ style: getChatbotContainerStyles(),
773
+ children: [
774
+ /* @__PURE__ */ jsxs("div", {
775
+ style: getHeaderStyles(headerBackground),
776
+ children: [
777
+ /* @__PURE__ */ jsx("div", {
778
+ style: getLogoContainerStyles(),
779
+ children: companyLogo
780
+ ? companyLogo.startsWith("http") || companyLogo.startsWith("data:")
781
+ ? /* @__PURE__ */ jsx("img", {
782
+ src: companyLogo,
783
+ alt: "Company Logo",
784
+ style: getLogoImageStyles(),
785
+ })
786
+ : /* @__PURE__ */ jsx("span", { style: getLogoTextStyles(), children: companyLogo })
787
+ : "\u{1F916}",
788
+ }),
789
+ /* @__PURE__ */ jsxs("div", {
790
+ children: [/* @__PURE__ */ jsx("h3", { style: getCompanyNameStyles(), children: companyName }), /* @__PURE__ */ jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })],
791
+ }),
792
+ ],
793
+ }),
794
+ /* @__PURE__ */ jsxs("div", {
795
+ style: getMessagesContainerStyles(),
796
+ children: [
797
+ messages.length === 0
798
+ ? /* @__PURE__ */ jsxs("div", {
799
+ style: getEmptyStateStyles(),
800
+ children: [
801
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
802
+ /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
803
+ /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px", opacity: 0.8 }, children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." }),
804
+ ],
805
+ })
806
+ : messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)),
807
+ showTypingIndicator &&
808
+ isLoading &&
809
+ messages.length > 0 &&
810
+ /* @__PURE__ */ jsx(MessageBubble, {
811
+ message: {
812
+ id: "typing",
813
+ content: "",
814
+ role: "assistant",
815
+ timestamp: /* @__PURE__ */ new Date(),
816
+ isTyping: true,
817
+ },
818
+ }),
819
+ /* @__PURE__ */ jsx("div", { ref: messagesEndRef }),
820
+ ],
821
+ }),
822
+ /* @__PURE__ */ jsx(ChatInput, {}),
823
+ ],
824
+ }),
825
+ }),
826
+ /* @__PURE__ */ jsx("button", {
772
827
  onClick: toggleChat,
773
828
  style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, isOpen),
774
829
  onMouseEnter: (e) => {
@@ -781,12 +836,26 @@ var AizekChatBot = ({ clientId, userToken }) => {
781
836
  },
782
837
  className: "floating-chat-button",
783
838
  "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
784
- children: isOpen ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
785
- }
786
- )
787
- ] });
839
+ children: isOpen
840
+ ? /* @__PURE__ */ jsx("svg", {
841
+ width: "24",
842
+ height: "24",
843
+ viewBox: "0 0 24 24",
844
+ fill: "currentColor",
845
+ children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
846
+ })
847
+ : /* @__PURE__ */ jsx("svg", {
848
+ width: "24",
849
+ height: "24",
850
+ viewBox: "0 0 24 24",
851
+ fill: "currentColor",
852
+ children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }),
853
+ }),
854
+ }),
855
+ ],
856
+ });
788
857
  };
789
858
 
790
859
  export { AizekChatBot, Button, useChatbot };
791
860
  //# sourceMappingURL=index.mjs.map
792
- //# sourceMappingURL=index.mjs.map
861
+ //# sourceMappingURL=index.mjs.map