@bikdotai/bik-component-library 0.0.718-beta.4 → 0.0.718-beta.5

package/dist/cjs/components/bik-chatbot/components/ChatLoadingState.js

@@ -0,0 +1,177 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("react"),a=require("styled-components");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(a);const n=["Preparing to assist you...","Getting ready to brainstorm..."],s=[{symbol:"✨",text:"Get AI-powered ideas"},{symbol:"💬",text:"Ask me anything"}],o=a.keyframes`
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+`,d=a.keyframes`
+	0%, 100% {
+		transform: scale(1);
+		opacity: 0.3;
+	}
+	50% {
+		transform: scale(1.4);
+		opacity: 1;
+	}
+`,l=a.keyframes`
+	from {
+		opacity: 0;
+		transform: translateX(-18px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+`,p=r.default.div`
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	min-height: 240px;
+`,x=r.default.div`
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 24px;
+	max-width: 280px;
+	width: 100%;
+`,f=r.default.div`
+	width: 76px;
+	height: 76px;
+	border-radius: 50%;
+	background: linear-gradient(
+		135deg,
+		rgba(255, 22, 106, 0.28) 0%,
+		rgba(123, 104, 238, 0.32) 100%
+	);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 22px 44px rgba(123, 104, 238, 0.22);
+	padding: 12px;
+	position: relative;
+	overflow: hidden;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset: 6px;
+		border-radius: 50%;
+		background: radial-gradient(
+			circle at 30% 30%,
+			rgba(255, 255, 255, 0.6),
+			transparent 70%
+		);
+		mix-blend-mode: screen;
+	}
+`,c=a.keyframes`
+	0% {
+		transform: scale(1);
+		filter: drop-shadow(0 6px 18px rgba(236, 72, 153, 0.22));
+	}
+	35% {
+		transform: scale(1.04);
+		filter: drop-shadow(0 10px 24px rgba(236, 72, 153, 0.32));
+	}
+	70% {
+		transform: scale(0.98);
+		filter: drop-shadow(0 4px 12px rgba(148, 163, 184, 0.18));
+	}
+	100% {
+		transform: scale(1);
+		filter: drop-shadow(0 6px 18px rgba(236, 72, 153, 0.22));
+	}
+`,m=a.keyframes`
+	0% {
+		transform: translateX(-120%);
+		opacity: 0;
+	}
+	30% {
+		opacity: 0.4;
+	}
+	60% {
+		transform: translateX(120%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateX(120%);
+		opacity: 0;
+	}
+`,g=r.default.div`
+	font-size: 14px;
+	color: #52586c;
+	line-height: 1.5;
+	min-height: 21px;
+	animation: ${o} 0.4s ease forwards;
+`,u=r.default.div`
+	display: flex;
+	justify-content: center;
+	gap: 6px;
+`,b=r.default.span`
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #f29cc9 0%, #b8a5f6 100%);
+	animation: ${d} 1.4s ease-in-out infinite;
+	animation-delay: ${e=>e.delay}s;
+`,y=r.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 8px;
+	width: 100%;
+`,h=r.default.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	background: linear-gradient(
+		135deg,
+		rgba(255, 255, 255, 0.92) 0%,
+		rgba(248, 246, 255, 0.96) 100%
+	);
+	border-radius: 12px;
+	padding: 12px;
+	box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.3);
+	animation: ${l} 0.5s ease forwards;
+	animation-delay: ${e=>e.delay}s;
+	opacity: 0;
+`,j=r.default.div`
+	width: 36px;
+	height: 36px;
+	border-radius: 10px;
+	background: linear-gradient(140deg, #ffffff 0%, #f7f3ff 100%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 10px 20px rgba(197, 181, 255, 0.24);
+	font-size: 18px;
+`,w=r.default.span`
+	font-size: 12px;
+	color: #5f6781;
+	text-align: left;
+`,v=r.default.img`
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	filter: drop-shadow(0 6px 18px rgba(236, 72, 153, 0.22));
+	animation: ${c} 2.6s ease-in-out infinite;
+	position: relative;
+	z-index: 1;
+`,k=r.default.div`
+	position: absolute;
+	inset: 12px;
+	border-radius: 999px;
+	background: linear-gradient(
+		140deg,
+		rgba(255, 255, 255, 0.65),
+		rgba(255, 255, 255, 0)
+	);
+	animation: ${m} 2.6s ease-in-out infinite;
+	pointer-events: none;
+	z-index: 0;
+`;exports.default=a=>{let{className:i,style:r}=a;const[o,d]=t.useState(0);return t.useEffect((()=>{const e=window.setInterval((()=>{d((e=>(e+1)%n.length))}),2e3);return()=>window.clearInterval(e)}),[]),e.jsxRuntimeExports.jsx(p,Object.assign({className:i,style:r},{children:e.jsxRuntimeExports.jsxs(x,{children:[e.jsxRuntimeExports.jsxs(f,{children:[e.jsxRuntimeExports.jsx(k,{}),e.jsxRuntimeExports.jsx(v,{src:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fcdf9c32d-6cf6-427f-b5c1-53cd424bfd5d?alt=media&token=740083c2-08ad-4295-a169-77c7d8ddaea9",alt:"AI thinking"})]}),e.jsxRuntimeExports.jsx(g,{children:n[o]},o),e.jsxRuntimeExports.jsx(u,{children:[0,1,2].map((t=>e.jsxRuntimeExports.jsx(b,{delay:.22*t},t)))}),e.jsxRuntimeExports.jsx(y,{children:s.map(((t,a)=>e.jsxRuntimeExports.jsxs(h,Object.assign({delay:.4+.2*a},{children:[e.jsxRuntimeExports.jsx(j,{children:t.symbol}),e.jsxRuntimeExports.jsx(w,{children:t.text})]}),t.text)))})]})}))};

package/dist/cjs/components/bik-chatbot/components/ChatWindow.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChatWindowProps } from '../types';
+export declare const CustomGradientText: import("styled-components").StyledComponent<"span", any, {
+    colors?: string | undefined;
+    angle?: number | undefined;
+}, never>;
+export type { ChatState } from '../types';
+interface ChatWindowWithHeightProps extends ChatWindowProps {
+    chatWindowHeight?: string | number;
+}
+declare const ChatWindow: React.FC<ChatWindowWithHeightProps>;
+export default ChatWindow;

package/dist/cjs/components/bik-chatbot/components/ChatWindow.js

@@ -0,0 +1,252 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/Ai_event_generating.svg.js"),i=require("react"),r=require("styled-components"),n=require("../../TypographyStyle.js"),s=require("../utils/markdown.js"),a=require("./ThinkingIndicator.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(r);const l=d.default.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+	height: 100%;
+	max-height: 100%;
+	background: white;
+	border-left: 1px solid #e5e7eb;
+	position: relative;
+
+	/* State-based styling */
+	${e=>{switch(e.chatState){case"conversation-starter":return"\n          background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);\n        ";case"thinking":return"\n          background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);\n        ";default:return"\n          background: white;\n        "}}}
+`,x=d.default.div`
+	padding: 16px;
+	border-bottom: 1px solid #e5e7eb;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: white;
+	flex-shrink: 0;
+
+	.header-text {
+		font-size: 14px;
+		font-weight: 500;
+		color: #374151;
+	}
+`,c=d.default.div`
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+`,p=d.default.div`
+	flex: 1;
+	overflow-y: auto;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	background: #fafafa;
+	scroll-behavior: smooth;
+	min-height: 0;
+
+	/* Custom scrollbar */
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #c1c1c1;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: #a8a8a8;
+	}
+`,u=d.default.div`
+	background: white;
+	border-radius: 12px;
+	padding: 16px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	border: 1px solid #e5e7eb;
+`,h=d.default.div`
+	width: 100%;
+	height: 180px;
+	background: #f3f4f6;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	margin-bottom: 12px;
+`,g=d.default.div`
+	width: 48px;
+	height: 48px;
+	background: rgba(0, 0, 0, 0.7);
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.8);
+		transform: scale(1.05);
+	}
+
+	svg {
+		width: 16px;
+		height: 16px;
+		fill: white;
+		margin-left: 2px;
+	}
+`,b=d.default.div`
+	font-size: 14px;
+	color: #374151;
+	line-height: 1.5;
+`,f=d.default.div`
+	padding: 12px 16px;
+	border-radius: 16px;
+	font-size: 14px;
+	max-width: 80%;
+	white-space: pre-line;
+	word-wrap: break-word;
+
+	${e=>"user"===e.role?"\n        background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n        margin-left: auto;\n        border-bottom-right-radius: 4px;\n        \n        & > div {\n          background: linear-gradient(92.69deg, #FF166A 0.37%, #FB5F08 100%);\n          -webkit-background-clip: text;\n          -webkit-text-fill-color: transparent;\n          background-clip: text;\n          display: inline-block;\n        }\n      ":"system"===e.role?"\n        background: #f3f4f6;\n        color: #6b7280;\n        font-size: 12px;\n        font-style: italic;\n        text-align: center;\n        margin: 0 auto;\n        max-width: 90%;\n      ":"\n        background: white;\n        color: #111827;\n        border: 1px solid #e5e7eb;\n        margin-right: auto;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n      "}
+`,m=d.default.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,j=d.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: flex-end;
+`,k=d.default.button`
+	border: 1px dotted #febad2;
+	background: linear-gradient(
+		92.69deg,
+		rgba(255, 230, 238, 0.5) 0.37%,
+		rgba(255, 240, 231, 0.5) 100%
+	);
+	padding: 8px 16px;
+	border-radius: 8px;
+	font-size: 13px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-align: left;
+	max-width: 280px;
+	align-self: flex-end;
+
+	&:hover {
+		background: linear-gradient(
+			92.69deg,
+			rgba(255, 230, 238, 0.7) 0.37%,
+			rgba(255, 240, 231, 0.7) 100%
+		);
+		border-color: #f472b6;
+	}
+
+	&:active {
+		transform: scale(0.98);
+	}
+`,v=d.default.div`
+	padding: 16px;
+	background: white;
+`,w=d.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,y=d.default.button`
+	background: #fef2f2;
+	color: #dc2626;
+	padding: 12px 16px;
+	border-radius: 8px;
+	font-size: 13px;
+	border: 1px solid #fecaca;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-align: left;
+
+	&:hover {
+		background: #fee2e2;
+		border-color: #fca5a5;
+	}
+
+	&:active {
+		transform: scale(0.98);
+	}
+`,E=d.default.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,R=d.default.div`
+	position: relative;
+	display: flex;
+	width: 100%;
+`,F=d.default.textarea`
+	flex: 1;
+	border: 1px solid ${e=>e.hasText?"#3b82f6":"#d1d5db"};
+	border-radius: 12px;
+	padding: 12px;
+	padding-right: 48px;
+	font-size: 14px;
+	outline: none;
+	color: #374151;
+	background: white;
+	box-shadow: 0px 2px 8px 0px #0000001f;
+	transition: all 0.2s ease;
+	resize: none;
+	min-height: 44px;
+	max-height: 120px;
+	font-family: inherit;
+	width: 100%;
+
+	&:focus {
+		border-color: #3b82f6;
+		background: white;
+		box-shadow: 0px 2px 8px 0px #0000001f, 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	&::placeholder {
+		color: #9ca3af;
+	}
+`,S=d.default.button`
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: ${e=>e.hasText?"linear-gradient(135deg, #FF166A 0%, #FB5F08 100%)":"#e5e7eb"};
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: ${e=>e.disabled?"not-allowed":"pointer"};
+	transition: all 0.2s ease;
+	box-shadow: 0 2px 8px 0px #fa709a1c;
+	z-index: 2;
+
+	&:hover:not(:disabled) {
+		background: ${e=>e.hasText&&!e.disabled?"linear-gradient(135deg, #F857A6 0%, #FF5858 100%)":"#e5e7eb"};
+		transform: scale(1.05);
+	}
+
+	&:active:not(:disabled) {
+		transform: scale(0.95);
+	}
+
+	svg {
+		width: 16px;
+		height: 16px;
+		fill: white;
+		font-weight: bold;
+	}
+`,T=d.default.span`
+	background: linear-gradient(
+		${e=>e.angle||92.69}deg,
+		${e=>e.colors||"#ff166a 0.37%, #fb5f08 100%"}
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	display: inline-block;
+`;exports.CustomGradientText=T,exports.default=r=>{let{messages:o,onSend:d,header:O="Create with AI",placeholder:C="Discover the right event & launch campaigns for better conversions...",suggestions:z=["Top festivals for marketing","Top events this week?","Top August festivals near you"],iceBreakers:B,videoStarter:$,disabled:q=!1,isThinking:A=!1,onIceBreakerClick:M,chatState:_,chatWindowHeight:I,inputDisabled:D=!1}=r;const[L,H]=i.useState(""),[W,K]=i.useState(!1),[P,G]=i.useState(!1),N=i.useRef(null),V=i.useRef(null),J=W||A,Q=q||D,U=_||(W||A?"thinking":P&&L.trim().length>0?"typing":0===o.length?"conversation-starter":o.length>0?"conversation":"default"),X=()=>{!L.trim()||Q||J||(d(L),H(""),K(!0),setTimeout((()=>K(!1)),1500))},Y=L.trim().length>0,Z=Q||J||!Y;i.useEffect((()=>{var e;null===(e=N.current)||void 0===e||e.scrollIntoView({behavior:"smooth"})}),[o,W,A]);const ee=I||"100%";return e.jsxRuntimeExports.jsxs(l,Object.assign({chatState:U,style:{height:ee}},{children:[e.jsxRuntimeExports.jsxs(x,{children:[e.jsxRuntimeExports.jsx(t.default,{height:24,width:24}),e.jsxRuntimeExports.jsx("div",Object.assign({className:"header-text"},{children:O}))]}),e.jsxRuntimeExports.jsxs(c,{children:[e.jsxRuntimeExports.jsxs(p,{children:["conversation-starter"===U&&$&&e.jsxRuntimeExports.jsxs(u,{children:[e.jsxRuntimeExports.jsx(h,{children:e.jsxRuntimeExports.jsx(g,Object.assign({onClick:$.onPlay},{children:e.jsxRuntimeExports.jsx("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor"},{children:e.jsxRuntimeExports.jsx("path",{d:"M8 5v14l11-7z"})}))}))}),e.jsxRuntimeExports.jsxs(b,{children:[e.jsxRuntimeExports.jsx(n.BodySecondary,Object.assign({style:{fontWeight:500,marginBottom:"4px"}},{children:$.title})),e.jsxRuntimeExports.jsx(n.BodyCaption,{children:$.description})]})]}),o.map((t=>e.jsxRuntimeExports.jsx(f,Object.assign({role:t.role},{children:"assistant"===t.role?e.jsxRuntimeExports.jsx("div",{dangerouslySetInnerHTML:{__html:s.renderMarkdownLite(t.content)}}):e.jsxRuntimeExports.jsx("div",Object.assign({style:{whiteSpace:"pre-wrap"}},{children:t.content}))}),t.id))),(W||A)&&e.jsxRuntimeExports.jsx(a.default,{}),e.jsxRuntimeExports.jsx("div",{ref:N})]}),B&&"conversation-starter"===U&&e.jsxRuntimeExports.jsx(m,{children:e.jsxRuntimeExports.jsx(j,{children:B.map((t=>e.jsxRuntimeExports.jsx(k,Object.assign({onClick:()=>{q||(null==M||M(t),d(t.text))}},{children:e.jsxRuntimeExports.jsx(T,{children:t.text})}),t.id)))})}),!B&&z.length>0&&"default"===U&&e.jsxRuntimeExports.jsx(v,{children:e.jsxRuntimeExports.jsx(w,{children:z.map((t=>e.jsxRuntimeExports.jsx(y,Object.assign({onClick:()=>!q&&d(t)},{children:t}),t)))})}),e.jsxRuntimeExports.jsx(E,{children:e.jsxRuntimeExports.jsxs(R,{children:[e.jsxRuntimeExports.jsx(F,{ref:V,value:L,onChange:e=>{if(Q)return;const t=e.target.value;H(t),G(t.trim().length>0);const i=V.current;i&&(i.style.height="auto",i.style.height=`${Math.min(i.scrollHeight,117)}px`)},placeholder:C,onKeyDown:e=>{Q||"Enter"!==e.key||e.shiftKey||(e.preventDefault(),!J&&L.trim()&&X())},disabled:Q,hasText:Y,chatState:U}),e.jsxRuntimeExports.jsx(S,Object.assign({onClick:X,disabled:Z,hasText:Y,"aria-label":"Send"},{children:e.jsxRuntimeExports.jsxs("svg",Object.assign({viewBox:"0 0 24 24",width:"20",height:"20",stroke:"white",strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"},{children:[e.jsxRuntimeExports.jsx("path",{d:"M6 12h12"}),e.jsxRuntimeExports.jsx("path",{d:"M12 6l6 6-6 6"})]}))}))]})})]})]}))};

package/dist/cjs/components/bik-chatbot/components/ThinkingIndicator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ThinkingIndicator: React.FC;
+export default ThinkingIndicator;

package/dist/cjs/components/bik-chatbot/components/ThinkingIndicator.js

@@ -0,0 +1,188 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("react");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=a(require("styled-components")).default.div`
+	background: #ffffff;
+	border: 1px solid ${e=>`${e.accent}33`};
+	padding: 16px 18px 20px;
+	border-radius: 16px;
+	border-bottom-left-radius: 6px;
+	width: clamp(260px, 70vw, 340px);
+	min-height: 140px;
+	margin-right: auto;
+	font-size: 14px;
+	color: #1f2937;
+	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+	display: flex;
+	align-items: flex-start;
+	gap: 14px;
+	position: relative;
+	overflow: hidden;
+	flex-shrink: 0;
+
+	&::after {
+		content: '';
+		position: absolute;
+		left: 18px;
+		right: 18px;
+		bottom: 10px;
+		height: 4px;
+		border-radius: 999px;
+		background: ${e=>e.gradient};
+		opacity: 0.35;
+		animation: glowPulse 2.4s ease-in-out infinite;
+		pointer-events: none;
+	}
+
+	.icon-wrapper {
+		position: relative;
+		width: 44px;
+		height: 44px;
+		border-radius: 12px;
+		background: ${e=>e.gradient};
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 10px 25px ${e=>`${e.accent}26`};
+		animation: iconPulse 2.4s ease-in-out infinite;
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	.icon-wrapper::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: 12px;
+		background: radial-gradient(
+			circle at top left,
+			rgba(255, 255, 255, 0.7),
+			transparent 65%
+		);
+		mix-blend-mode: screen;
+	}
+
+	.icon-letter {
+		font-size: 18px;
+		font-weight: 700;
+		color: #ffffff;
+		letter-spacing: 0.02em;
+	}
+
+	.bubble-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		width: 100%;
+	}
+
+	.status-text {
+		font-weight: 500;
+		color: #1f2937;
+		line-height: 1.45;
+		animation: textFade 0.35s ease forwards;
+		min-height: 20px;
+	}
+
+	.dots {
+		display: flex;
+		gap: 6px;
+	}
+
+	.dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: ${e=>e.accent};
+		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+		animation: dotBounce 1.3s ease-in-out infinite;
+	}
+
+	.shimmer-group {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.shimmer-line {
+		height: 6px;
+		border-radius: 999px;
+		background: rgba(148, 163, 184, 0.18);
+		position: relative;
+		overflow: hidden;
+		animation: shimmerAppear 0.4s ease forwards;
+	}
+
+	.shimmer-highlight {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			90deg,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 0.75) 50%,
+			rgba(255, 255, 255, 0) 100%
+		);
+		transform: translateX(-100%);
+		animation: shimmerMove 1.8s linear infinite;
+	}
+
+	@keyframes iconPulse {
+		0%,
+		100% {
+			transform: scale(0.95) rotate(-3deg);
+		}
+		50% {
+			transform: scale(1.05) rotate(3deg);
+		}
+	}
+
+	@keyframes dotBounce {
+		0%,
+		100% {
+			transform: translateY(0) scale(1);
+			opacity: 0.35;
+		}
+		50% {
+			transform: translateY(-6px) scale(1.2);
+			opacity: 1;
+		}
+	}
+
+	@keyframes shimmerMove {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(140%);
+		}
+	}
+
+	@keyframes shimmerAppear {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes glowPulse {
+		0%,
+		100% {
+			opacity: 0.2;
+		}
+		50% {
+			opacity: 0.55;
+		}
+	}
+
+	@keyframes textFade {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+`,s=[{label:"A",text:"Analyzing your question...",gradient:"linear-gradient(135deg, #a855f7 0%, #7c3aed 100%)",accent:"#7c3aed"},{label:"C",text:"Crafting the perfect response...",gradient:"linear-gradient(135deg, #f97316 0%, #fb5f08 100%)",accent:"#fb5f08"},{label:"G",text:"Gathering insights...",gradient:"linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",accent:"#2563eb"}];exports.default=()=>{const[a,r]=t.useState(0);t.useEffect((()=>{const e=window.setInterval((()=>{r((e=>(e+1)%s.length))}),1800);return()=>window.clearInterval(e)}),[]);const n=s[a];return e.jsxRuntimeExports.jsxs(i,Object.assign({gradient:n.gradient,accent:n.accent,role:"status","aria-live":"polite"},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"icon-wrapper"},{children:e.jsxRuntimeExports.jsx("span",Object.assign({className:"icon-letter"},{children:n.label}))})),e.jsxRuntimeExports.jsxs("div",Object.assign({className:"bubble-content"},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"status-text"},{children:n.text})),e.jsxRuntimeExports.jsx("div",Object.assign({className:"dots"},{children:[0,1,2,3,4].map((t=>e.jsxRuntimeExports.jsx("span",{className:"dot",style:{animationDelay:.15*t+"s"}},t)))})),e.jsxRuntimeExports.jsx("div",Object.assign({className:"shimmer-group"},{children:[60,80,45].map(((t,a)=>e.jsxRuntimeExports.jsx("div",Object.assign({className:"shimmer-line",style:{width:`${t}%`,animationDelay:.25+.12*a+"s"}},{children:e.jsxRuntimeExports.jsx("span",{className:"shimmer-highlight"})}),t)))}))]}))]}))};

package/dist/cjs/components/bik-chatbot/contexts/AIContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AIContextState, AIProviderProps } from '../types';
+export declare const AIProvider: React.FC<AIProviderProps>;
+export declare const useAIContext: () => AIContextState;

package/dist/cjs/components/bik-chatbot/contexts/AIContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),s=require("../../../node_modules/react/jsx-runtime.js"),t=require("react"),o=require("../services/useAIChat.js"),r=require("../types/ai.js"),n=require("../services/callToChatbot.js");const i=t.createContext(null);exports.AIProvider=a=>{let{children:u,systemPrompt:l,systemId:d,functions:c,tools:m,functionHandler:p,onMessageReceived:v,displayInUI:f,maxToolCalls:x,maxTokens:A,requestExecutor:E,baseUrl:g,endpointPath:I,responseFormat:y,conversationId:h="default-session",customModel:C,onSystemReady:L}=a;const[q,j]=t.useState(null),[P,_]=t.useState(!0),[b,M]=t.useState(null),w=t.useRef(null);t.useEffect((()=>l?E&&g?void M(null):(M("Chatbot authentication not configured: RequestExecutor and baseUrl are required"),void _(!1)):(M("systemPrompt is required for generic mode"),void _(!1))),[l,E,g]);const D=t.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){try{_(!0),M(null);const e=C||r.DEFAULT_MODEL;if(!r.ALLOWED_MODELS.includes(e))throw new Error(`Unsupported model: ${C||"default"}. Allowed models are: ${r.ALLOWED_MODELS.join(", ")}`);j({id:d||"generic",name:d?`${d} `:"Generic AI Assistant",model:e,systemPrompt:l,functions:c,tools:m})}catch(e){const s=(null==e?void 0:e.message)||"Failed to create AI system";M(s)}finally{_(!1)}}))),[C,l,d,c]);t.useEffect((()=>{l&&D()}),[D]),t.useEffect((()=>{q&&L&&q.id!==w.current&&(w.current=q.id,L(q)),q||(w.current=null)}),[q]);const{messages:O,conversation:R,sendMessage:T,isApiCallInProgress:U}=o.useAIChat({system:q||{id:"loading",name:"Loading...",model:r.DEFAULT_MODEL,systemPrompt:"Loading...",functions:[]},conversationId:h,skipInitialization:!q,customFunctions:c,functionHandler:p,responseFormat:y,onMessageReceived:v,displayInUI:f,maxToolCalls:x,maxTokens:A,apiAdapter:E&&g?n.createExecutorApiAdapter(E,g,I||void 0):()=>{throw new Error("Chatbot authentication not configured: RequestExecutor is required")}}),F={isReady:!!q&&!P,isLoading:P,isApiCallInProgress:U,system:q,messages:O,conversation:R,sendMessage:T,error:b};return s.jsxRuntimeExports.jsx(i.Provider,Object.assign({value:F},{children:u}))},exports.useAIContext=()=>{const e=t.useContext(i);if(!e)throw new Error("useAIContext must be used within an AIProvider");return e};