@bikdotai/bik-component-library 0.0.738-0 → 0.0.738-5

package/dist/esm/components/bik-chatbot/components/BIKChatbot.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, FC } from 'react';
+import { BIKChatbotProps, SystemConfig } from '../types';
+/**
+ * BIKChatbot - Generic AI chatbot component
+ *
+ * This component provides a flexible, generic chatbot interface that can be configured
+ * for any use case through custom prompts, functions, and response handling.
+ *
+ * Usage Examples:
+ *
+ * // Simple text chatbot
+ * <BIKChatbot
+ *   systemPrompt="You are a helpful assistant"
+ *   responseFormat="text"
+ *   onMessageReceived={(text) => handleText(text)}
+ * />
+ *
+ */
+/**
+ * @prop chatWindowHeight - The height (px or string) for internal chat window/messages area. Default 400px.
+ * @prop fullHeight - If true, makes the chatbot extend to full height (100% height)
+ * @prop width - Width of the chatbot container (default: undefined, will use maxWidth constraint)
+ * @prop maxWidth - Maximum width constraint (default: 480px, only applies if width is not set)
+ * @prop onSystemReady - Callback fired when system is initialized, receives SystemConfig with name, id, model, etc.
+ * @prop useCase - Optional use case identifier for the chatbot
+ */
+export interface BIKChatbotWithStyleProps extends BIKChatbotProps {
+    width?: string | number;
+    maxWidth?: string | number;
+    fullHeight?: boolean;
+    style?: CSSProperties;
+    chatWindowHeight?: string | number;
+    tools?: string[];
+    onSystemReady?: (system: SystemConfig) => void;
+    useCase?: string;
+}
+export declare const BIKChatbot: FC<BIKChatbotWithStyleProps>;
+export default BIKChatbot;

package/dist/esm/components/bik-chatbot/components/BIKChatbot.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{AIProvider as t}from"../contexts/AIContext.js";import{AIChat as s}from"./AIChat.js";const o=o=>{let{systemPrompt:a,systemId:r,functions:i,functionHandler:n,onMessageReceived:d,displayInUI:l,maxToolCalls:c,maxTokens:m,model:h,conversationId:p,className:u,height:f,showHeader:g=!0,placeholder:x,iceBreakers:y,videoStarter:I,onMessageSent:v,onIceBreakerClick:S,chatState:b,inputDisabled:k,requestExecutor:w,baseUrl:C,endpointPath:H,responseFormat:j,responseSchema:E,width:M,maxWidth:P,fullHeight:B,style:R,chatWindowHeight:T,tools:U,onSystemReady:W,useCase:q}=o;if(!a)throw new Error("systemPrompt is required for generic mode.");const D=Object.assign({width:M||void 0,maxWidth:M?void 0:P||480,height:B?"100%":f||(null==R?void 0:R.height)||void 0,display:"flex",flexDirection:"column",border:"1px solid #E0E0E0",background:"#fff"},R);return e("div",Object.assign({className:u,style:D},{children:e(t,Object.assign({systemPrompt:a,systemId:r,functions:i,functionHandler:n,responseFormat:j,responseSchema:E,onMessageReceived:d,displayInUI:l,maxToolCalls:c,maxTokens:m,customModel:h,conversationId:p,requestExecutor:w,baseUrl:C,endpointPath:H,tools:U,onSystemReady:W,useCase:q},{children:e(s,{height:B?"100%":f,chatWindowHeight:T,showHeader:g,placeholder:x,iceBreakers:y,videoStarter:I,onMessageSent:v,onIceBreakerClick:S,chatState:b,inputDisabled:k})}))}))};export{o as BIKChatbot,o as default};

package/dist/esm/components/bik-chatbot/components/ChatLoadingState.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ChatLoadingStateProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ChatLoadingState: React.FC<ChatLoadingStateProps>;
+export default ChatLoadingState;

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

@@ -0,0 +1,177 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import r,{keyframes as n}from"styled-components";const o=["Preparing to assist you...","Getting ready to brainstorm..."],s=[{symbol:"✨",text:"Get AI-powered ideas"},{symbol:"💬",text:"Ask me anything"}],d=n`
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+`,p=n`
+	0%, 100% {
+		transform: scale(1);
+		opacity: 0.3;
+	}
+	50% {
+		transform: scale(1.4);
+		opacity: 1;
+	}
+`,l=n`
+	from {
+		opacity: 0;
+		transform: translateX(-18px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+`,c=r.div`
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	min-height: 240px;
+`,f=r.div`
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 24px;
+	max-width: 280px;
+	width: 100%;
+`,x=r.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;
+	}
+`,g=n`
+	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=n`
+	0% {
+		transform: translateX(-120%);
+		opacity: 0;
+	}
+	30% {
+		opacity: 0.4;
+	}
+	60% {
+		transform: translateX(120%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateX(120%);
+		opacity: 0;
+	}
+`,b=r.div`
+	font-size: 14px;
+	color: #52586c;
+	line-height: 1.5;
+	min-height: 21px;
+	animation: ${d} 0.4s ease forwards;
+`,h=r.div`
+	display: flex;
+	justify-content: center;
+	gap: 6px;
+`,y=r.span`
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #f29cc9 0%, #b8a5f6 100%);
+	animation: ${p} 1.4s ease-in-out infinite;
+	animation-delay: ${e=>e.delay}s;
+`,u=r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 8px;
+	width: 100%;
+`,w=r.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;
+`,v=r.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;
+`,k=r.span`
+	font-size: 12px;
+	color: #5f6781;
+	text-align: left;
+`,j=r.img`
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	filter: drop-shadow(0 6px 18px rgba(236, 72, 153, 0.22));
+	animation: ${g} 2.6s ease-in-out infinite;
+	position: relative;
+	z-index: 1;
+`,$=r.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;
+`,z=r=>{let{className:n,style:d}=r;const[p,l]=t(0);return i((()=>{const e=window.setInterval((()=>{l((e=>(e+1)%o.length))}),2e3);return()=>window.clearInterval(e)}),[]),e(c,Object.assign({className:n,style:d},{children:a(f,{children:[a(x,{children:[e($,{}),e(j,{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(b,{children:o[p]},p),e(h,{children:[0,1,2].map((a=>e(y,{delay:.22*a},a)))}),e(u,{children:s.map(((t,i)=>a(w,Object.assign({delay:.4+.2*i},{children:[e(v,{children:t.symbol}),e(k,{children:t.text})]}),t.text)))})]})}))};export{z as default};

package/dist/esm/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/esm/components/bik-chatbot/components/ChatWindow.js

@@ -0,0 +1,254 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/Ai_event_generating.svg.js";import{useState as r,useRef as n,useEffect as a}from"react";import o from"styled-components";import{BodySecondary as d,BodyCaption as l}from"../../TypographyStyle.js";import{renderMarkdownLite as s}from"../utils/markdown.js";import c from"./ThinkingIndicator.js";const h=o.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        "}}}
+`,g=o.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;
+	}
+`,p=o.div`
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+`,b=o.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;
+	}
+`,x=o.div`
+	background: white;
+	border-radius: 12px;
+	padding: 16px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	border: 1px solid #e5e7eb;
+`,f=o.div`
+	width: 100%;
+	height: 180px;
+	background: #f3f4f6;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	margin-bottom: 12px;
+`,u=o.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;
+	}
+`,m=o.div`
+	font-size: 14px;
+	color: #374151;
+	line-height: 1.5;
+`,k=o.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      "}
+`,v=o.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,w=o.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: flex-end;
+`,y=o.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: ${e=>e.disabled?"not-allowed":"pointer"};
+	transition: all 0.2s ease;
+	text-align: left;
+	max-width: 280px;
+	align-self: flex-end;
+	opacity: ${e=>e.disabled?.5:1};
+
+	&:hover:not(:disabled) {
+		background: linear-gradient(
+			92.69deg,
+			rgba(255, 230, 238, 0.7) 0.37%,
+			rgba(255, 240, 231, 0.7) 100%
+		);
+		border-color: #f472b6;
+	}
+
+	&:active:not(:disabled) {
+		transform: scale(0.98);
+	}
+`,F=o.div`
+	padding: 16px;
+	background: white;
+`,j=o.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,T=o.button`
+	background: #fef2f2;
+	color: #dc2626;
+	padding: 12px 16px;
+	border-radius: 8px;
+	font-size: 13px;
+	border: 1px solid #fecaca;
+	cursor: ${e=>e.disabled?"not-allowed":"pointer"};
+	transition: all 0.2s ease;
+	text-align: left;
+	opacity: ${e=>e.disabled?.5:1};
+
+	&:hover:not(:disabled) {
+		background: #fee2e2;
+		border-color: #fca5a5;
+	}
+
+	&:active:not(:disabled) {
+		transform: scale(0.98);
+	}
+`,$=o.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,O=o.div`
+	position: relative;
+	display: flex;
+	width: 100%;
+`,S=o.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;
+	}
+`,z=o.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;
+	}
+`,C=o.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;
+`,A=o=>{let{messages:A,onSend:B,header:I="Create with AI",placeholder:M="Discover the right event & launch campaigns for better conversions...",suggestions:D=["Top festivals for marketing","Top events this week?","Top August festivals near you"],iceBreakers:_,videoStarter:H,disabled:L=!1,isThinking:W=!1,onIceBreakerClick:K,chatState:E,chatWindowHeight:N,inputDisabled:P=!1}=o;const[V,q]=r(""),[G,J]=r(!1),[Q,R]=r(!1),U=n(null),X=n(null),Y=G||W,Z=L||P,ee=E||(G||W?"thinking":Q&&V.trim().length>0?"typing":0===A.length?"conversation-starter":A.length>0?"conversation":"default"),ie=()=>{!V.trim()||Z||Y||(B(V),q(""),J(!0),setTimeout((()=>J(!1)),1500))},te=V.trim().length>0,re=Z||Y||!te;a((()=>{var e;null===(e=U.current)||void 0===e||e.scrollIntoView({behavior:"smooth"})}),[A,G,W]);const ne=N||"100%";return e(h,Object.assign({chatState:ee,style:{height:ne}},{children:[e(g,{children:[i(t,{height:24,width:24}),i("div",Object.assign({className:"header-text"},{children:I}))]}),e(p,{children:[e(b,{children:["conversation-starter"===ee&&H&&e(x,{children:[i(f,{children:i(u,Object.assign({onClick:H.onPlay},{children:i("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor"},{children:i("path",{d:"M8 5v14l11-7z"})}))}))}),e(m,{children:[i(d,Object.assign({style:{fontWeight:500,marginBottom:"4px"}},{children:H.title})),i(l,{children:H.description})]})]}),A.map((e=>i(k,Object.assign({role:e.role},{children:"assistant"===e.role?i("div",{dangerouslySetInnerHTML:{__html:s(e.content)}}):i("div",Object.assign({style:{whiteSpace:"pre-wrap"}},{children:e.content}))}),e.id))),(G||W)&&i(c,{}),i("div",{ref:U})]}),_&&"conversation-starter"===ee&&i(v,{children:i(w,{children:_.map((e=>i(y,Object.assign({disabled:Z,onClick:()=>{Z||(null==K||K(e),B(e.text))}},{children:i(C,{children:e.text})}),e.id)))})}),!_&&D.length>0&&"default"===ee&&i(F,{children:i(j,{children:D.map((e=>i(T,Object.assign({disabled:Z,onClick:()=>!Z&&B(e)},{children:e}),e)))})}),i($,{children:e(O,{children:[i(S,{ref:X,value:V,onChange:e=>{if(Z)return;const i=e.target.value;q(i),R(i.trim().length>0);const t=X.current;t&&(t.style.height="auto",t.style.height=`${Math.min(t.scrollHeight,117)}px`)},placeholder:M,onKeyDown:e=>{Z||"Enter"!==e.key||e.shiftKey||(e.preventDefault(),!Y&&V.trim()&&ie())},disabled:Z,hasText:te,chatState:ee}),i(z,Object.assign({onClick:ie,disabled:re,hasText:te,"aria-label":"Send"},{children:e("svg",Object.assign({viewBox:"0 0 24 24",width:"20",height:"20",stroke:"white",strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"},{children:[i("path",{d:"M6 12h12"}),i("path",{d:"M12 6l6 6-6 6"})]}))}))]})})]})]}))};export{C as CustomGradientText,A as default};

package/dist/esm/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/esm/components/bik-chatbot/components/ThinkingIndicator.js

@@ -0,0 +1,147 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as i}from"react";import s from"styled-components";import r from"../../../assets/icons/Idea.svg.js";import n from"../../../assets/icons/AiEdit.svg.js";import o from"../../../assets/icons/HelpIcon.svg.js";const l=s.div`
+    background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);
+	padding: 24px;
+	border-radius: 16px;
+	border-bottom-left-radius: 6px;
+	width: clamp(260px, 70vw, 340px);
+	min-height: 108px;
+	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;
+
+	
+
+	.icon-svg {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+		animation: iconPulse 2.4s ease-in-out infinite;
+	}
+
+	.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: #EC4899;
+		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: 10px;
+		border-radius: 20px;
+		background: linear-gradient(92.69deg, #FEBAD2 0.37%, #FDD1B9 100%);
+		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);
+		}
+	}
+`,m=[{icon:r,text:"Analyzing your questions..."},{icon:n,text:"Gathering insights..."},{icon:o,text:"Crafting the perfect response..."}],d=()=>{const[s,r]=a(0);i((()=>{const e=window.setInterval((()=>{r((e=>(e+1)%m.length))}),1800);return()=>window.clearInterval(e)}),[]);const n=m[s];return e(l,Object.assign({role:"status","aria-live":"polite"},{children:[t(n.icon,{height:24,width:24}),e("div",Object.assign({className:"bubble-content"},{children:[t("div",Object.assign({className:"status-text"},{children:n.text})),t("div",Object.assign({className:"dots"},{children:[0,1,2,3,4].map((e=>t("span",{className:"dot",style:{animationDelay:.15*e+"s"}},e)))})),t("div",Object.assign({className:"shimmer-group"},{children:[70,85,50].map(((e,a)=>t("div",Object.assign({className:"shimmer-line",style:{width:`${e}%`,animationDelay:.25+.12*a+"s"}},{children:t("span",{className:"shimmer-highlight"})}),e)))}))]}))]}))};export{d as default};

package/dist/esm/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/esm/components/bik-chatbot/contexts/AIContext.js

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