@bikdotai/bik-component-library 0.0.69 → 0.0.73-9.beta-0

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:I,onMessageReceived:y,displayInUI:h,maxToolCalls:C,maxTokens:x,requestExecutor:A,baseUrl:P,endpointPath:b,responseFormat:w,conversationId:j="default-session",customModel:q,onSystemReady:E,useCase:R,storeId:M}=i;const[T,U]=o(null),[F,k]=o(!0),[L,$]=o(null),H=t(null);n((()=>p?A&&P?void $(null):($("Chatbot authentication not configured: RequestExecutor and baseUrl are required"),void k(!1)):($("systemPrompt is required for generic mode"),void k(!1))),[p,A,P]);const _=r((()=>e(void 0,void 0,void 0,(function*(){try{k(!0),$(null);const e=q||u;if(!c.includes(e))throw new Error(`Unsupported model: ${q||"default"}. Allowed models are: ${c.join(", ")}`);U({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";$(s)}finally{k(!1)}}))),[q,p,f,v]);n((()=>{p&&_()}),[_]),n((()=>{T&&E&&T.id!==H.current&&(H.current=T.id,E(T)),T||(H.current=null)}),[T]);const{messages:z,conversation:G,sendMessage:O,isApiCallInProgress:S}=d({system:T||{id:"loading",name:"Loading...",model:u,systemPrompt:"Loading...",functions:[]},conversationId:j,skipInitialization:!T,customFunctions:v,functionHandler:I,responseFormat:w,onMessageReceived:y,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,storeId:M}),B={isReady:!!T&&!F,isLoading:F,isApiCallInProgress:S,system:T,messages:z,conversation:G,sendMessage:O,error:L};return s(m.Provider,Object.assign({value:B},{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};

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

@@ -0,0 +1,137 @@
+export { BIKChatbot, default as default } from './components/BIKChatbot';
+export { AIChat } from './components/AIChat';
+export { AIProvider, useAIContext } from './contexts/AIContext';
+export { useAIChat } from './services/useAIChat';
+export type { ChatMessage, ChatState, IceBreaker, VideoStarter, SessionRecord, FunctionDefinition, ToolCall, GenericAIResponse, CallbackPayload, SystemConfig, PromptConfig, ToolPrompt, ApiRequestExecutor, GenericChatbotProps, BIKChatbotProps, AIChatProps, ChatWindowProps, AIProviderProps, AIContextState, UseAIChatProps, AIServiceConstructorProps, ErrorWithMessage, } from './types';
+export { createSessionRecord, DEFAULT_RESPONSE_FORMAT, DEFAULT_MAX_TOOL_CALLS, DEFAULT_CONVERSATION_ID, CHAT_MESSAGE_ROLES, RESPONSE_FORMATS, } 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.
+ *
+ * ## Generic Mode (Custom Functions & Built-in Tools)
+ *
+ * ### Simple Text Chatbot (responseFormat: 'text')
+ *
+ * ```typescript
+ * <BIKChatbot
+ *   systemPrompt="You are a helpful assistant"
+ *   responseFormat="text"
+ *   requestExecutor={myRequestExecutor}
+ *   baseUrl={myBaseUrl}
+ *   onMessageReceived={(text) => handleText(text)}
+ * />
+ * ```
+ *
+ * ### Analytics Advisor with Functions (and built-in tools)
+ *
+ * ```typescript
+ * <BIKChatbot
+ *   systemPrompt="You analyze delivery metrics and suggest improvements. Call getAnalytics() to fetch data, then summarize for the user."
+ *   responseFormat="json"
+ *   tools={["web_search_preview"]}
+ *   requestExecutor={myRequestExecutor}
+ *   baseUrl={myBaseUrl}
+ *   functions={[
+ *     {
+ *       name: "getAnalytics",
+ *       description: "Fetch delivery rate and engagement metrics",
+ *       parameters: { type: "object", properties: {}, required: [] }
+ *     }
+ *   ]}
+ *   functionHandler={async (name, args) => {
+ *     if (name === "getAnalytics") {
+ *       return { deliveryRate: 0.75, engagementRate: 0.12 };
+ *     }
+ *   }}
+ *   onMessageReceived={(payload) => {
+ *     // In json mode, payload is parsed JSON when AI returns JSON text
+ *     // Or TOOL_CALL/TOOL_RESULT when tools are used
+ *   }}
+ * />
+ * ```
+ *
+ * ### Content Idea Generator (Multi-step Tool Calls)
+ *
+ * ```typescript
+ * <BIKChatbot
+ *   systemPrompt="Call getTrends() to fetch social media trends. Generate 5 content ideas. Call updateIdeas() to save them. Then summarize for the user."
+ *   responseFormat="json"
+ *   functions={[
+ *     { name: "getTrends", description: "Get latest social media trends", parameters: { type: "object", properties: {}, required: [] } },
+ *     { name: "updateIdeas", description: "Save content ideas", parameters: { type: "object", properties: { ideas: { type: "array", items: { type: "string" } } }, required: ["ideas"] } }
+ *   ]}
+ *   functionHandler={async (name, args) => {
+ *     if (name === "getTrends") return "AI, short-form video, nostalgia marketing";
+ *     if (name === "updateIdeas") { saveToDatabase(args.ideas); return { success: true }; }
+ *   }}
+ *   onMessageReceived={(payload) => {
+ *     // Handle TOOL_CALL/TOOL_RESULT events or parsed JSON, depending on flow
+ *   }}
+ * />
+ * ```
+ *
+ * ### Silent Background Generation
+ *
+ * ```typescript
+ * <BIKChatbot
+ *   systemPrompt="Generate email templates for the campaign"
+ *   responseFormat="json"
+ *   displayInUI={false}  // Silent mode - no chat bubbles
+ *   onMessageReceived={(payload) => {
+ *     // Receives data (parsed JSON or tool events) without UI display
+ *   }}
+ * />
+ * ```
+ *
+ * ### Built-in Tools & Campaign Flow (Optional)
+ *
+ * ```typescript
+ * <BIKChatbot
+ *   systemPrompt={campaignSystemPrompt}
+ *   tools={["web_search_preview"]}
+ *   requestExecutor={myRequestExecutor}
+ *   baseUrl={myBaseUrl}
+ *   functions={[submitCampaignsFunction]}
+ *   functionHandler={async (name, args) => name === 'submitCampaigns' ? 'submitted' : 'ok'}
+ *   onMessageReceived={(event) => {
+ *     if (event && typeof event === 'object' && 'type' in event && (event as any).type === 'TOOL_CALL') {
+ *       const d = (event as any).data;
+ *       if (d?.name === 'submitCampaigns' && Array.isArray(d?.args?.campaigns)) {
+ *         setCampaigns(d.args.campaigns);
+ *       }
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * ## Universal Pattern for ANY Use Case
+ *
+ * 1. Define your custom functions (tools AI can call) and built-in tools (e.g., web_search_preview)
+ * 2. Set `responseFormat`:
+ *    - 'text' for normal chat
+ *    - 'json' to parse assistant JSON and show parsed.response
+ * 3. Implement `functionHandler` for your tools
+ * 4. Handle final output in `onMessageReceived`:
+ *    - text string (when responseFormat='text')
+ *    - parsed JSON object (when responseFormat='json')
+ *    - TOOL_CALL / TOOL_RESULT events (when tools are used)
+ *
+ * **The Universal Flow:**
+ * ```
+ * User input → AI thinking
+ *   ↓
+ * AI calls custom function (getTrends, getAnalytics, etc.)
+ *   ↓
+ * Your functionHandler executes it
+ *   ↓
+ * Result returned to AI
+ *   ↓
+ * AI calls another function (optional, repeat) or returns final reply
+ *   ↓
+ * Component displays response in chat bubble (or stays silent if displayInUI=false)
+ *   ↓
+ * onMessageReceived receives text, parsed JSON, or tool events
+ * ```
+ */

package/dist/esm/components/bik-chatbot/services/aiService.d.ts

@@ -0,0 +1,32 @@
+import { AIServiceConstructorProps, ChatMessage, FunctionDefinition, SystemConfig } from '../types';
+import { APIAdapter } from '../types/ai';
+import type { ResponseFormat } from '../types/ai';
+export declare class AIService {
+    system: SystemConfig;
+    dispatchMessage: (m: ChatMessage) => void;
+    customFunctions?: FunctionDefinition[];
+    functionHandler?: (name: string, args: unknown) => Promise<unknown>;
+    onMessageReceived?: (message: string | object) => void;
+    displayInUI?: boolean;
+    maxToolCalls?: number;
+    maxTokens?: number;
+    apiAdapter: APIAdapter;
+    responseFormat?: ResponseFormat;
+    useCase?: string;
+    storeId?: string;
+    constructor(opts: AIServiceConstructorProps);
+    private sanitizeToolOutput;
+    private tryParseAssistantJson;
+    private dispatchParsedResponses;
+    private makeSystemMessage;
+    generate(messages: {
+        role: string;
+        content: string;
+    }[], conversationId: string, intent?: string, lastResponseId?: string): Promise<{
+        responseId?: string;
+    }>;
+    /**
+     * Recursive tool call engine for all AI interactions
+     */
+    private generateWithRecursiveToolCalls;
+}

package/dist/esm/components/bik-chatbot/services/aiService.js

@@ -0,0 +1 @@
+import{__rest as e,__awaiter as t}from"../../../_virtual/_tslib.js";import{injectSafetyPrompt as s,sanitizeUserInput as i}from"../utils/guardrails.js";import{callToChatbot as a}from"./callToChatbot.js";class o{constructor(e){if(Object.defineProperty(this,"system",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dispatchMessage",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"customFunctions",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"functionHandler",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"onMessageReceived",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"displayInUI",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"maxToolCalls",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"maxTokens",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"apiAdapter",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"responseFormat",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"useCase",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"storeId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.system=e.system,this.dispatchMessage=e.dispatchMessage,this.customFunctions=e.customFunctions,this.functionHandler=e.functionHandler,this.onMessageReceived=e.onMessageReceived,this.displayInUI=!1!==e.displayInUI,this.maxToolCalls=e.maxToolCalls||10,this.maxTokens=e.maxTokens,this.apiAdapter=e.apiAdapter,this.responseFormat=e.responseFormat,this.useCase=e.useCase,this.storeId=e.storeId,!this.apiAdapter)throw new Error("Chatbot authentication not configured: RequestExecutor is required")}sanitizeToolOutput(t,s){try{if(null!==s&&"object"==typeof s){const t=s,{success:i}=t,a=e(t,["success"]);return JSON.stringify(a)}return"string"==typeof s?s:String(s)}catch(e){return"string"==typeof s?s:String(s)}}tryParseAssistantJson(e){if(!e)return null;let t=e.trim();t=t.replace(/^```json\s*/i,"").replace(/^```\s*/i,"").replace(/\s*```$/g,"").trim();try{return JSON.parse(t)}catch(s){try{const e=`[${t.replace(/}\s*{/g,"},{")}]`;return JSON.parse(e)}catch(t){return e}}}dispatchParsedResponses(e){if(!this.displayInUI)return;const t=Date.now();e.forEach(((e,s)=>{let i="",a="assistant";if(e&&"object"==typeof e){const t=e;"string"==typeof t.response?i=t.response:"string"==typeof t.content&&(i=t.content),"system"===t.role&&(a="system")}else"string"==typeof e&&(i=e);i&&this.dispatchMessage({id:`m-${t}-${s}`,role:a,content:i,timestamp:t+s})}))}makeSystemMessage(){return{role:"system",content:s(this.system.systemPrompt)}}generate(e,s){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default",o=arguments.length>3?arguments[3]:void 0;return t(this,void 0,void 0,(function*(){const t=e.map((e=>({role:e.role,text:i(e.content)}))),n=[{role:"system",text:this.makeSystemMessage().content},...t];return this.generateWithRecursiveToolCalls(n,s,a,o)}))}generateWithRecursiveToolCalls(e,s,i,o){var n,r,l,c,d,h,u,p,m,y;return t(this,void 0,void 0,(function*(){const t=e.map((e=>({role:e.role,text:e.text})));let f,g=o,v=0;for(;v<this.maxToolCalls;){let e;v++;try{if(f)e=f,f=void 0;else{let o;if(1===v&&g){const e=[...t].reverse().find((e=>"user"===e.role));e&&(o=[{role:"user",content:e.text}])}e=yield a(t,i,s,this.system.id,this.apiAdapter,g,this.system.functions,this.system.model,o,this.system.tools,this.maxTokens,this.useCase,this.storeId)}}catch(e){return this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"system",content:`AI error: ${String((null==e?void 0:e.message)||e)}`,timestamp:Date.now()}),{}}if(g=e.responseId,!e.toolCall){if(e.assistantText)if("json"===this.responseFormat){const t=null!==(n=e.parsed)&&void 0!==n?n:this.tryParseAssistantJson(e.assistantText);if(null!=t){const e=Array.isArray(t)?t:[t];this.displayInUI&&this.dispatchParsedResponses(e),null===(r=this.onMessageReceived)||void 0===r||r.call(this,t)}else{const t=e.assistantText.trim();this.displayInUI&&t&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:t,timestamp:Date.now()}),null===(l=this.onMessageReceived)||void 0===l||l.call(this,e.assistantText)}}else this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:e.assistantText,timestamp:Date.now()}),null===(c=this.onMessageReceived)||void 0===c||c.call(this,e.assistantText);return{responseId:g}}const{name:o,args:b,toolCallId:I,callId:x}=e.toolCall;I&&t.push({role:"assistant",text:"",toolCallId:I,toolName:o,toolArgs:JSON.stringify(b)});try{const e="string"==typeof b?(()=>{try{return JSON.parse(b)}catch(e){return b}})():b;null===(d=this.onMessageReceived)||void 0===d||d.call(this,{type:"TOOL_CALL",data:{name:o,args:e}});const n=yield this.functionHandler(o,e);if(I?t.push({role:"tool",text:JSON.stringify(n),toolCallId:I}):t.push({role:"tool",text:JSON.stringify(n)}),x){const e="object"==typeof n&&null!==n?n:String(n),r=this.sanitizeToolOutput(o,e);try{const t="string"==typeof e?e:JSON.stringify(e);null===(h=this.onMessageReceived)||void 0===h||h.call(this,{type:"TOOL_RESULT",data:{name:o,preview:t.slice(0,1e3)}})}catch(e){}const l=[{type:"function_call_output",call_id:x,output:r}],c=yield a(t,i,s,this.system.id,this.apiAdapter,g,this.system.functions,this.system.model,l,this.system.tools,this.maxTokens,this.useCase,this.storeId);if(g=c.responseId,!c.toolCall){if(c.assistantText)if("json"===this.responseFormat){const e=null!==(u=c.parsed)&&void 0!==u?u:this.tryParseAssistantJson(c.assistantText);if(null!=e){const t=Array.isArray(e)?e:[e];this.displayInUI&&this.dispatchParsedResponses(t),null===(p=this.onMessageReceived)||void 0===p||p.call(this,e)}else this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:c.assistantText,timestamp:Date.now()}),null===(m=this.onMessageReceived)||void 0===m||m.call(this,c.assistantText)}else this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:c.assistantText,timestamp:Date.now()}),null===(y=this.onMessageReceived)||void 0===y||y.call(this,c.assistantText);return{responseId:g}}f=c}else;}catch(e){return this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"system",content:`Tool error: ${String((null==e?void 0:e.message)||e)}`,timestamp:Date.now()}),{responseId:g}}}return this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"system",content:`Maximum tool call iterations (${this.maxToolCalls}) reached.`,timestamp:Date.now()}),{responseId:g}}))}}export{o as AIService};

package/dist/esm/components/bik-chatbot/services/callToChatbot.d.ts

@@ -0,0 +1,6 @@
+import { APIAdapter, ApiRequestExecutor, ChatMessageItem, FunctionCallOutputItem, FunctionDefinition, GenericAIResponse } from '../types';
+export declare function createExecutorApiAdapter(executor: ApiRequestExecutor, baseUrl: string, endpointPath?: string): APIAdapter;
+export declare function callToChatbot(history: {
+    role: string;
+    text: string;
+}[], intent: string | undefined, conversationId: string | undefined, systemId: string | undefined, apiAdapter: APIAdapter, previousResponseId?: string, customFunctions?: FunctionDefinition[], model?: string, nextInput?: Array<ChatMessageItem | FunctionCallOutputItem>, builtinTools?: string[], maxTokens?: number, useCase?: string, storeId?: string): Promise<GenericAIResponse>;

package/dist/esm/components/bik-chatbot/services/callToChatbot.js

@@ -0,0 +1 @@
+import{__awaiter as t}from"../../../_virtual/_tslib.js";import{DEFAULT_MODEL as e}from"../types/ai.js";function o(e,o){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"/bik-ai/call-chatbot";return s=>t(this,void 0,void 0,(function*(){var t,i;const{input:l,model:r,maxTokens:a=4e3,previousResponseId:d,customFunctions:u,builtinTools:p,storeId:c}=s,v={input:l,tools:[...(p||[]).map((t=>({type:t}))),...(h=u,h&&0!==h.length?h.map((t=>({type:"function",name:t.name,description:t.description,parameters:t.parameters}))):[])],model:r,max_output_tokens:a,previous_response_id:d,output_parser:"bik_chatbot_parser",use_case:s.useCase,store_id:c};var h;const m=`${o.replace(/\/$/,"")}${n}`,{status:g,data:f,error:I}=yield e.sendData({apiPath:m,apiMethod:"POST",requestBody:v});if(200!==g||!(null==f?void 0:f.success)){const e=(null===(i=null===(t=null==f?void 0:f.errors)||void 0===t?void 0:t[0])||void 0===i?void 0:i.message)||I;throw new Error("Backend error: "+(e?` - ${String(e)}`:""))}return function(t){const e={assistantText:t.assistantText,parsed:t.parsed,lastResponseId:t.lastResponseId,responseId:t.responseId};return t.toolCall&&(e.toolCall={name:t.toolCall.name,args:t.toolCall.args,toolCallId:t.toolCall.id,callId:t.toolCall.call_id}),e}(f.data)}))}function n(o){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default",s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default-session",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"generic",l=arguments.length>4?arguments[4]:void 0,r=arguments.length>5?arguments[5]:void 0,a=arguments.length>6?arguments[6]:void 0,d=arguments.length>7&&void 0!==arguments[7]?arguments[7]:e,u=arguments.length>8?arguments[8]:void 0,p=arguments.length>9?arguments[9]:void 0,c=arguments.length>10?arguments[10]:void 0,v=arguments.length>11?arguments[11]:void 0,h=arguments.length>12?arguments[12]:void 0;return t(this,void 0,void 0,(function*(){if(!l)throw new Error("Chatbot authentication not configured: RequestExecutor is required");const t=u&&u.length>0?u:function(t){return t.map((t=>{let{role:e,text:o}=t;return{role:e,content:o}}))}(o),e={input:t,intent:n,conversationId:s,systemId:i,previousResponseId:r,customFunctions:a,builtinTools:p,model:d,maxTokens:null!=c?c:4e3,useCase:v,storeId:h};return yield l(e)}))}export{n as callToChatbot,o as createExecutorApiAdapter};

package/dist/esm/components/bik-chatbot/services/db.d.ts

@@ -0,0 +1,6 @@
+import { SessionRecord } from '../types';
+/** Save session record to IndexedDB */
+export declare function saveSession(sessionId: string, record: SessionRecord): Promise<void>;
+export declare function loadSession(sessionId: string): Promise<SessionRecord | null>;
+export declare function deleteSession(sessionId: string): Promise<void>;
+export declare function listSessions(): Promise<string[]>;

package/dist/esm/components/bik-chatbot/services/db.js

@@ -0,0 +1 @@
+import{__awaiter as i}from"../../../_virtual/_tslib.js";import{set as o,get as t}from"idb-keyval";const n="ai-session:";function r(t,r){return i(this,void 0,void 0,(function*(){yield o(`${n}${t}`,r)}))}function u(o){return i(this,void 0,void 0,(function*(){return(yield t(`${n}${o}`))||null}))}export{u as loadSession,r as saveSession};

package/dist/esm/components/bik-chatbot/services/useAIChat.d.ts

@@ -0,0 +1,7 @@
+import { ChatMessage, SessionRecord, UseAIChatProps } from '../types';
+export declare function useAIChat({ system, conversationId, skipInitialization, customFunctions, functionHandler, responseFormat, onMessageReceived, displayInUI, maxToolCalls, maxTokens, apiAdapter, useCase, storeId, }: Omit<UseAIChatProps, 'updateUI'>): {
+    messages: ChatMessage[];
+    conversation: SessionRecord;
+    sendMessage: (content: string, intent?: string) => Promise<void>;
+    isApiCallInProgress: boolean;
+};

package/dist/esm/components/bik-chatbot/services/useAIChat.js

@@ -0,0 +1 @@
+import{__awaiter as s}from"../../../_virtual/_tslib.js";import{useState as e,useEffect as t,useMemo as a}from"react";import{createSessionRecord as n}from"../types/chat.js";import{AIService as o}from"./aiService.js";import{loadSession as i,saveSession as c}from"./db.js";function r(r){var d=this;let{system:l,conversationId:m,skipInitialization:g=!1,customFunctions:p,functionHandler:u,responseFormat:b,onMessageReceived:j,displayInUI:O,maxToolCalls:I,maxTokens:v,apiAdapter:f,useCase:w,storeId:y}=r;const[h,C]=e((()=>n(m))),[D,R]=e([]),[A,k]=e(),[x,F]=e(!1);t((()=>{i(m).then((s=>{var e;s&&(C(s),R(s.messages),k(null===(e=s.metadata)||void 0===e?void 0:e.lastResponseId))}))}),[m]);const M=a((()=>g?null:new o({system:Object.assign(Object.assign({},l),{handleCallback:(s,e)=>{var t;null===(t=l.handleCallback)||void 0===t||t.call(l,s,e)}}),dispatchMessage:s=>{R((e=>[...e,s])),C((e=>{const t=Object.assign(Object.assign({},e),{updatedAt:Date.now(),messages:[...e.messages,s]});return c(t.sessionId,Object.assign(Object.assign({},t),{metadata:Object.assign(Object.assign({},t.metadata||{}),{lastResponseId:A})})),t}))},customFunctions:p,functionHandler:u,responseFormat:b,onMessageReceived:j,displayInUI:O,maxToolCalls:I,maxTokens:v,apiAdapter:f,useCase:w,storeId:y})),[l.id,g,v]);return{messages:D,conversation:h,sendMessage:function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default";return s(d,void 0,void 0,(function*(){if(!M)return;const s={id:`u-${Date.now()}`,role:"user",content:e,timestamp:Date.now()};R((e=>[...e,s])),C((e=>{const t=Object.assign(Object.assign({},e),{updatedAt:Date.now(),messages:[...e.messages,s]});return c(t.sessionId,Object.assign(Object.assign({},t),{metadata:Object.assign(Object.assign({},t.metadata||{}),{lastResponseId:A})})),t})),F(!0);try{const e=yield M.generate([...D,s].map((s=>({role:s.role,content:s.content}))),m,t,A);(null==e?void 0:e.responseId)&&(k(e.responseId),C((s=>{const t=Object.assign(Object.assign({},s),{metadata:Object.assign(Object.assign({},s.metadata||{}),{lastResponseId:e.responseId})});return c(t.sessionId,t),t})))}catch(s){const e=(null==s?void 0:s.message)||"Something went wrong. Please try again.",t={id:`err-${Date.now()}`,role:"system",content:e,timestamp:Date.now()};R((s=>[...s,t])),C((s=>{const e=Object.assign(Object.assign({},s),{updatedAt:Date.now(),messages:[...s.messages,t]});return c(e.sessionId,Object.assign(Object.assign({},e),{metadata:Object.assign(Object.assign({},e.metadata||{}),{lastResponseId:A})})),e}))}finally{F(!1)}}))},isApiCallInProgress:x}}export{r as useAIChat};