@bikdotai/bik-component-library 0.0.706-beta.1 → 0.0.707--bik-chatbot-v1-beta0.1

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AIChatProps } from '../types';
+export declare const AIChat: React.FC<AIChatProps & {
+    chatWindowHeight?: string | number;
+}>;

package/dist/cjs/components/bik-chatbot/components/AIChat.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("../contexts/AIContext.js"),i=require("./ChatWindow.js");exports.AIChat=r=>{let{className:a,style:n,header:o,showHeader:l=!0,placeholder:c="Ask me anything...",suggestions:d=["Top festivals for marketing","Top events this week?","Top August festivals near you"],disabled:x=!1,isThinking:j=!1,height:m,iceBreakers:u,videoStarter:g,onMessageSent:h,onIceBreakerClick:p,chatState:v,chatWindowHeight:b}=r;const{isReady:y,isLoading:f,messages:k,sendMessage:E,error:O,system:R,isApiCallInProgress:N}=t.useAIContext(),A=o||(null==R?void 0:R.name)||"AI Assistant";return O?s.jsxRuntimeExports.jsx("div",Object.assign({className:`flex items-center justify-center p-6 ${a}`,style:n},{children:s.jsxRuntimeExports.jsxs("div",Object.assign({className:"text-red-500 text-center"},{children:[s.jsxRuntimeExports.jsx("div",Object.assign({className:"text-lg font-semibold mb-2"},{children:"Error"})),s.jsxRuntimeExports.jsx("div",Object.assign({className:"text-sm"},{children:O}))]}))})):y?s.jsxRuntimeExports.jsx("div",Object.assign({className:a,style:Object.assign(Object.assign({},n),{height:m,width:"100%"})},{children:s.jsxRuntimeExports.jsx(i.default,{messages:k,onSend:s=>e.__awaiter(void 0,void 0,void 0,(function*(){try{yield E(s),null==h||h(s)}catch(e){console.error("Failed to send message:",e)}})),header:l?A:void 0,placeholder:c,suggestions:d,iceBreakers:u,videoStarter:g,disabled:x||f,isThinking:j||N,onIceBreakerClick:p,chatState:v,chatWindowHeight:b})})):s.jsxRuntimeExports.jsx("div",Object.assign({className:`flex items-center justify-center p-6 ${a}`,style:n},{children:s.jsxRuntimeExports.jsxs("div",Object.assign({className:"text-gray-500"},{children:[s.jsxRuntimeExports.jsx("div",{className:"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"}),s.jsxRuntimeExports.jsx("div",Object.assign({className:"text-center text-sm"},{children:"Initializing AI..."}))]}))}))};

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

@@ -0,0 +1,30 @@
+import { FC, CSSProperties } from 'react';
+import { BIKChatbotProps } 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) => console.log(text)}
+ * />
+ *
+ */
+/**
+ * @prop chatWindowHeight - The height (px or string) for internal chat window/messages area. Default 400px.
+ */
+export interface BIKChatbotWithStyleProps extends BIKChatbotProps {
+    width?: string | number;
+    maxWidth?: string | number;
+    style?: CSSProperties;
+    chatWindowHeight?: string | number;
+    tools?: string[];
+}
+export declare const BIKChatbot: FC<BIKChatbotWithStyleProps>;
+export default BIKChatbot;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../contexts/AIContext.js"),s=require("./AIChat.js");const r=r=>{let{systemPrompt:o,systemId:a,functions:n,functionHandler:i,onMessageReceived:d,displayInUI:c,maxToolCalls:l,model:h,conversationId:m,className:u,height:x,showHeader:p=!0,placeholder:I,iceBreakers:j,videoStarter:g,onMessageSent:f,onIceBreakerClick:v,chatState:y,requestExecutor:b,baseUrl:E,endpointPath:w,responseFormat:C,responseSchema:S,width:k,maxWidth:P,style:q,chatWindowHeight:H,tools:M}=r;if(!o)throw new Error("systemPrompt is required for generic mode.");return e.jsxRuntimeExports.jsx("div",Object.assign({className:u,style:Object.assign({width:k||void 0,maxWidth:P||480,border:"1px solid #E0E0E0",background:"#fff"},q)},{children:e.jsxRuntimeExports.jsx(t.AIProvider,Object.assign({systemPrompt:o,systemId:a,functions:n,functionHandler:i,responseFormat:C,responseSchema:S,onMessageReceived:d,displayInUI:c,maxToolCalls:l,customModel:h,conversationId:m,requestExecutor:b,baseUrl:E,endpointPath:w,tools:M},{children:e.jsxRuntimeExports.jsx(s.AIChat,{height:x,chatWindowHeight:H,showHeader:p,placeholder:I,iceBreakers:j,videoStarter:g,onMessageSent:f,onIceBreakerClick:v,chatState:y})}))}))};exports.BIKChatbot=r,exports.default=r;

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,295 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("react"),i=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../utils/markdown.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(i);const a=o.default.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 356px;
+	min-height: 400px;
+	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        "}}}
+`,d=o.default.div`
+	padding: 16px;
+	border-bottom: 1px solid #e5e7eb;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: white;
+	flex-shrink: 0;
+
+	.ai-icon {
+		width: 16px;
+		height: 16px;
+		background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+		border-radius: 3px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 8px;
+		color: white;
+		font-weight: bold;
+	}
+
+	.header-text {
+		font-size: 14px;
+		font-weight: 500;
+		color: #374151;
+	}
+`,l=o.default.div`
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+`,x=o.default.div`
+	flex: 1;
+	overflow-y: auto;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	background: #fafafa;
+	scroll-behavior: smooth;
+
+	/* 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;
+	}
+`,p=o.default.div`
+	background: white;
+	border-radius: 12px;
+	padding: 16px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	border: 1px solid #e5e7eb;
+`,c=o.default.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.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;
+	}
+`,h=o.default.div`
+	font-size: 14px;
+	color: #374151;
+	line-height: 1.5;
+`,g=o.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: #3b82f6;\n        color: white;\n        margin-left: auto;\n        border-bottom-right-radius: 4px;\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      "}
+`,b=o.default.div`
+	background: white;
+	border: 1px solid #e5e7eb;
+	padding: 12px 16px;
+	border-radius: 16px;
+	border-bottom-left-radius: 4px;
+	max-width: 80%;
+	margin-right: auto;
+	font-size: 14px;
+	color: #6b7280;
+	font-style: italic;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	.spinner {
+		width: 12px;
+		height: 12px;
+		border: 2px solid #e5e7eb;
+		border-top: 2px solid #3b82f6;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`,f=o.default.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,m=o.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: flex-end;
+`,j=o.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);
+	}
+`,w=o.default.div`
+	padding: 16px;
+	background: white;
+`,v=o.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,k=o.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);
+	}
+`,y=o.default.div`
+	padding: 16px;
+	flex-shrink: 0;
+`,E=o.default.div`
+	position: relative;
+	display: flex;
+	width: 100%;
+`,R=o.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;
+	}
+`,F=o.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?"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;
+	}
+`,S=o.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=S,exports.default=i=>{let{messages:s,onSend:o,header:O="Create with AI",placeholder:T="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:C,videoStarter:$,disabled:B=!1,isThinking:M=!1,onIceBreakerClick:A,chatState:q,chatWindowHeight:I}=i;const[_,L]=t.useState(""),[D,H]=t.useState(!1),[N,W]=t.useState(!1),K=t.useRef(null),P=t.useRef(null),G=q||(D||M?"thinking":N&&_.trim().length>0?"typing":0===s.length?"conversation-starter":s.length>0?"conversation":"default"),V=()=>{_.trim()&&!B&&(o(_),L(""),H(!0),setTimeout((()=>H(!1)),1500))},J=_.trim().length>0;return t.useEffect((()=>{var e;null===(e=K.current)||void 0===e||e.scrollIntoView({behavior:"smooth"})}),[s,D]),e.jsxRuntimeExports.jsxs(a,Object.assign({chatState:G,style:{height:I||400}},{children:[e.jsxRuntimeExports.jsxs(d,{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"ai-icon"},{children:"✦"})),e.jsxRuntimeExports.jsx("div",Object.assign({className:"header-text"},{children:O}))]}),e.jsxRuntimeExports.jsxs(l,{children:[e.jsxRuntimeExports.jsxs(x,{children:["conversation-starter"===G&&$&&e.jsxRuntimeExports.jsxs(p,{children:[e.jsxRuntimeExports.jsx(c,{children:e.jsxRuntimeExports.jsx(u,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(h,{children:[e.jsxRuntimeExports.jsx(r.BodySecondary,Object.assign({style:{fontWeight:500,marginBottom:"4px"}},{children:$.title})),e.jsxRuntimeExports.jsx(r.BodyCaption,{children:$.description})]})]}),s.map((t=>e.jsxRuntimeExports.jsx(g,Object.assign({role:t.role},{children:"assistant"===t.role?e.jsxRuntimeExports.jsx("div",{dangerouslySetInnerHTML:{__html:n.renderMarkdownLite(t.content)}}):e.jsxRuntimeExports.jsx("div",Object.assign({style:{whiteSpace:"pre-wrap"}},{children:t.content}))}),t.id))),(D||M)&&e.jsxRuntimeExports.jsxs(b,{children:[e.jsxRuntimeExports.jsx("div",{className:"spinner"}),"AI is thinking..."]}),e.jsxRuntimeExports.jsx("div",{ref:K})]}),C&&"conversation-starter"===G&&e.jsxRuntimeExports.jsx(f,{children:e.jsxRuntimeExports.jsx(m,{children:C.map((t=>e.jsxRuntimeExports.jsx(j,Object.assign({onClick:()=>{B||(null==A||A(t),o(t.text))}},{children:e.jsxRuntimeExports.jsx(S,{children:t.text})}),t.id)))})}),!C&&z.length>0&&"default"===G&&e.jsxRuntimeExports.jsx(w,{children:e.jsxRuntimeExports.jsx(v,{children:z.map((t=>e.jsxRuntimeExports.jsx(k,Object.assign({onClick:()=>!B&&o(t)},{children:t}),t)))})}),e.jsxRuntimeExports.jsx(y,{children:e.jsxRuntimeExports.jsxs(E,{children:[e.jsxRuntimeExports.jsx(R,{ref:P,value:_,onChange:e=>{const t=e.target.value;L(t),W(t.trim().length>0);const i=P.current;i&&(i.style.height="auto",i.style.height=`${Math.min(i.scrollHeight,117)}px`)},placeholder:T,onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),V())},disabled:B,hasText:J,chatState:G}),e.jsxRuntimeExports.jsx(F,Object.assign({onClick:V,disabled:B||!J,hasText:J,"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/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("../services/callToChatbot.js");const n=t.createContext(null);exports.AIProvider=i=>{let{children:a,systemPrompt:u,systemId:c,functions:l,tools:d,functionHandler:m,onMessageReceived:p,displayInUI:v,maxToolCalls:g,requestExecutor:I,baseUrl:f,endpointPath:x,responseFormat:A,conversationId:y="default-session",customModel:h}=i;const[C,q]=t.useState(null),[P,b]=t.useState(!0),[E,j]=t.useState(null);t.useEffect((()=>u?I&&f?void j(null):(j("Chatbot authentication not configured: RequestExecutor and baseUrl are required"),void b(!1)):(j("systemPrompt is required for generic mode"),void b(!1))),[u,I,f]);const _=t.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){try{b(!0),j(null);q({id:c||"generic",name:c?`${c} AI Assistant`:"Generic AI Assistant",model:h||"gpt-4o-mini",systemPrompt:u,functions:l,tools:d})}catch(e){console.error("Error creating system:",e),j("Failed to create AI system")}finally{b(!1)}}))),[h,u,c,l]);t.useEffect((()=>{u&&_()}),[_]);const{messages:w,conversation:M,sendMessage:R,isApiCallInProgress:F}=o.useAIChat({system:C||{id:"loading",name:"Loading...",model:"gpt-4o-mini",systemPrompt:"Loading...",functions:[]},conversationId:y,skipInitialization:!C,customFunctions:l,functionHandler:m,responseFormat:A,onMessageReceived:p,displayInUI:v,maxToolCalls:g,apiAdapter:I&&f?r.createExecutorApiAdapter(I,f,x||void 0):()=>{throw new Error("Chatbot authentication not configured: RequestExecutor is required")}}),U={isReady:!!C&&!P,isLoading:P,isApiCallInProgress:F,system:C,messages:w,conversation:M,sendMessage:R,error:E};return s.jsxRuntimeExports.jsx(n.Provider,Object.assign({value:U},{children:a}))},exports.useAIContext=()=>{const e=t.useContext(n);if(!e)throw new Error("useAIContext must be used within an AIProvider");return e};

package/dist/cjs/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, ModelTier, FunctionDefinition, ToolCall, ResponseToolCall, GenericAIResponse, CallbackPayload, SystemConfig, PromptConfig, ToolPrompt, ApiRequestExecutor, GenericChatbotProps, BIKChatbotProps, AIChatProps, ChatWindowProps, AIProviderProps, AIContextState, UseAIChatProps, AIServiceConstructorProps, ErrorWithMessage, } from './types';
+export { createSessionRecord, DEFAULT_MODEL, 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) => console.log(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/cjs/components/bik-chatbot/services/aiService.d.ts

@@ -0,0 +1,27 @@
+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;
+    apiAdapter: APIAdapter;
+    responseFormat?: ResponseFormat;
+    constructor(opts: AIServiceConstructorProps);
+    private sanitizeToolOutput;
+    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/cjs/components/bik-chatbot/services/aiService.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../utils/guardrails.js"),s=require("./callToChatbot.js");exports.AIService=class{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,"apiAdapter",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"responseFormat",{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.apiAdapter=e.apiAdapter,this.responseFormat=e.responseFormat,!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,o=e.__rest(t,["success"]);return JSON.stringify(o)}return"string"==typeof s?s:String(s)}catch(e){return String(s)}}makeSystemMessage(){return{role:"system",content:t.injectSafetyPrompt(this.system.systemPrompt)}}generate(s,i){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default",a=arguments.length>3?arguments[3]:void 0;return e.__awaiter(this,void 0,void 0,(function*(){const e=s.map((e=>({role:e.role,text:t.sanitizeUserInput(e.content)}))),n=[{role:"system",text:this.makeSystemMessage().content},...e];return this.generateWithRecursiveToolCalls(n,i,o,a)}))}generateWithRecursiveToolCalls(t,i,o,a){var n,l,r,c,d,h,u,p;return e.__awaiter(this,void 0,void 0,(function*(){const e=t.map((e=>({role:e.role,text:e.text})));let m=a,y=0;const g=[];let f;for(;y<this.maxToolCalls;){let t;y++,console.log(`🔄 Recursive tool call iteration ${y}/${this.maxToolCalls}`);try{if(f)t=f,f=void 0;else{let a;if(1===y&&m){const t=[...e].reverse().find((e=>"user"===e.role));t&&(a=[{role:"user",content:t.text}])}t=yield s.callToChatbot(e,o,i,this.system.id,this.apiAdapter,m,this.system.functions,this.system.model,a,this.system.tools)}}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(m=t.responseId,!t.toolCall){if(console.log(`✅ Completed after ${y} iterations. Tool calls made:`,g.map((e=>e.name)).join(", ")||"none"),t.assistantText)if("json"===this.responseFormat)try{const e=JSON.parse(t.assistantText);if(this.displayInUI){const s="string"==typeof(null==e?void 0:e.response)?e.response:t.assistantText;this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:s,timestamp:Date.now()})}null===(n=this.onMessageReceived)||void 0===n||n.call(this,e)}catch(e){this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:t.assistantText,timestamp:Date.now()}),null===(l=this.onMessageReceived)||void 0===l||l.call(this,t.assistantText)}else this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:t.assistantText,timestamp:Date.now()}),null===(r=this.onMessageReceived)||void 0===r||r.call(this,t.assistantText);return{responseId:m}}const{name:a,args:v,toolCallId:b,callId:I}=t.toolCall;console.log(`🔧 Tool call #${y}: ${a}`,v),b&&console.log(`🔧 Tool call ID: ${b}`),g.push({name:a,args:v,iteration:y}),b&&e.push({role:"assistant",text:"",toolCallId:b,toolName:a,toolArgs:JSON.stringify(v)});try{const t="string"==typeof v?(()=>{try{return JSON.parse(v)}catch(e){return v}})():v;null===(c=this.onMessageReceived)||void 0===c||c.call(this,{type:"TOOL_CALL",data:{name:a,args:t}});const n=yield this.functionHandler(a,t);if(b?e.push({role:"tool",text:JSON.stringify(n),toolCallId:b}):(console.warn("⚠️ No tool_call_id available for tool result"),e.push({role:"tool",text:JSON.stringify(n)})),I){const t="object"==typeof n&&null!==n?n:String(n),l=this.sanitizeToolOutput(a,t);try{const e="string"==typeof t?t:JSON.stringify(t);null===(d=this.onMessageReceived)||void 0===d||d.call(this,{type:"TOOL_RESULT",data:{name:a,preview:e.slice(0,1e3)}})}catch(e){}const r=[{type:"function_call_output",call_id:I,output:l}],c=yield s.callToChatbot(e,o,i,this.system.id,this.apiAdapter,m,this.system.functions,this.system.model,r,this.system.tools);if(m=c.responseId,!c.toolCall){if(c.assistantText)if("json"===this.responseFormat)try{const e=JSON.parse(c.assistantText);if(this.displayInUI){const t="string"==typeof(null==e?void 0:e.response)?e.response:c.assistantText;this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:t,timestamp:Date.now()})}null===(h=this.onMessageReceived)||void 0===h||h.call(this,e)}catch(e){this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:c.assistantText,timestamp:Date.now()}),null===(u=this.onMessageReceived)||void 0===u||u.call(this,c.assistantText)}else this.displayInUI&&this.dispatchMessage({id:`m-${Date.now()}`,role:"assistant",content:c.assistantText,timestamp:Date.now()}),null===(p=this.onMessageReceived)||void 0===p||p.call(this,c.assistantText);return{responseId:m}}f=c}else console.warn("⚠️ No call_id provided by backend for tool chaining")}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:m}}}return this.displayInUI&&(console.warn(`⚠️ Maximum tool call iterations (${this.maxToolCalls}) reached. Tool calls made:`,g.map((e=>`${e.name} (iter ${e.iteration})`)).join(", ")||"none"),this.dispatchMessage({id:`m-${Date.now()}`,role:"system",content:`Maximum tool call iterations (${this.maxToolCalls}) reached.`,timestamp:Date.now()})),{responseId:m}}))}};

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

@@ -0,0 +1,6 @@
+import { FunctionDefinition, GenericAIResponse, ApiRequestExecutor, ChatMessageItem, FunctionCallOutputItem, APIAdapter } 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[]): Promise<GenericAIResponse>;

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

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

package/dist/cjs/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/cjs/components/bik-chatbot/services/db.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("idb-keyval");const t="ai-session:";exports.loadSession=function(r){return e.__awaiter(this,void 0,void 0,(function*(){return(yield i.get(`${t}${r}`))||null}))},exports.saveSession=function(r,s){return e.__awaiter(this,void 0,void 0,(function*(){yield i.set(`${t}${r}`,s)}))};

package/dist/cjs/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, apiAdapter, }: Omit<UseAIChatProps, 'updateUI'>): {
+    messages: ChatMessage[];
+    conversation: SessionRecord;
+    sendMessage: (content: string, intent?: string) => Promise<void>;
+    isApiCallInProgress: boolean;
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),s=require("react"),t=require("../types/chat.js");require("../types/ai.js");var a=require("./aiService.js"),n=require("./db.js");exports.useAIChat=function(o){var i=this;let{system:r,conversationId:c,skipInitialization:l=!1,customFunctions:d,functionHandler:g,responseFormat:u,onMessageReceived:m,displayInUI:p,maxToolCalls:v,apiAdapter:b}=o;const[j,I]=s.useState((()=>t.createSessionRecord(c))),[O,y]=s.useState([]),[S,f]=s.useState(),[h,w]=s.useState(!1);s.useEffect((()=>{n.loadSession(c).then((e=>{var s;e&&(I(e),y(e.messages),f(null===(s=e.metadata)||void 0===s?void 0:s.lastResponseId))}))}),[c]);const A=s.useMemo((()=>l?(console.log("⏭️ Skipping AIService creation - system not ready"),null):(console.log("🔧 Creating AIService with system:",r.id,r.name),console.log("🔧 System prompt preview:",r.systemPrompt.substring(0,50)+"..."),console.log("🔧 useMemo triggered - system reference changed"),new a.AIService({system:Object.assign(Object.assign({},r),{handleCallback:(e,s)=>{var t;null===(t=r.handleCallback)||void 0===t||t.call(r,e,s)}}),dispatchMessage:e=>{y((s=>[...s,e])),I((s=>{const t=Object.assign(Object.assign({},s),{updatedAt:Date.now(),messages:[...s.messages,e]});return n.saveSession(t.sessionId,Object.assign(Object.assign({},t),{metadata:Object.assign(Object.assign({},t.metadata||{}),{lastResponseId:S})})),t}))},customFunctions:d,functionHandler:g,responseFormat:u,onMessageReceived:m,displayInUI:p,maxToolCalls:v,apiAdapter:b}))),[r.id,l]);return{messages:O,conversation:j,sendMessage:function(s){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default";return e.__awaiter(i,void 0,void 0,(function*(){if(!A)return void console.warn("⚠️ AIService not ready - cannot send message");console.log("📤 Sending message with system:",r.id,r.name),console.log("📝 Message content:",s.substring(0,100)+"...");const e={id:`u-${Date.now()}`,role:"user",content:s,timestamp:Date.now()};y((s=>[...s,e])),I((s=>{const t=Object.assign(Object.assign({},s),{updatedAt:Date.now(),messages:[...s.messages,e]});return n.saveSession(t.sessionId,Object.assign(Object.assign({},t),{metadata:Object.assign(Object.assign({},t.metadata||{}),{lastResponseId:S})})),t})),w(!0);try{const s=yield A.generate([...O,e].map((e=>({role:e.role,content:e.content}))),c,t,S);(null==s?void 0:s.responseId)&&(f(s.responseId),I((e=>{const t=Object.assign(Object.assign({},e),{metadata:Object.assign(Object.assign({},e.metadata||{}),{lastResponseId:s.responseId})});return n.saveSession(t.sessionId,t),t})))}catch(e){console.error("Error sending message:",e)}finally{w(!1)}}))},isApiCallInProgress:h}};